set default to none.

[bhuvana-abhisheg]

Hi.. I am using your component in our app. The smilies look great. Thanks for such an awesome component. We need to customise the component as per our requirement. By default the center smiley is selected. Can we change the default selection to none ? Pls let me know.

[bneigher]

@bhuvana-abhisheg just render based on state the component without any of the animated props

return (
      <View style={styles.reactions}>
        {REACTIONS.map((reaction, idx) => {
          const u = idx * DISTANCE;

          return (
            <TouchableOpacity
              onPress={() => {
                this.setState({ interacted: true });
                this.updatePan(u);
              }}
              activeOpacity={0.9}
              key={idx}>
              <View style={styles.smileyWrap}>
                <Animated.Image source={reaction.src} style={[styles.smiley]} />
              </View>

              <Animated.Text style={[styles.reactionText]}>
                {reaction.label}
              </Animated.Text>
            </TouchableOpacity>
          );
        })}
      </View>
    );

only when this.state.interacted is true, render the original return of the component

[aravi365]

Hi.. I am using your component in our app. The smilies look great. Thanks for such an awesome component. We need to customise the component as per our requirement. By default the center smiley is selected. Can we change the default selection to none ? Pls let me know.

did you able to solve this? If yes, can you please share the code.

[aravi365]

@bhuvana-abhisheg just render based on state the component without any of the animated props

return (
      <View style={styles.reactions}>
        {REACTIONS.map((reaction, idx) => {
          const u = idx * DISTANCE;

          return (
            <TouchableOpacity
              onPress={() => {
                this.setState({ interacted: true });
                this.updatePan(u);
              }}
              activeOpacity={0.9}
              key={idx}>
              <View style={styles.smileyWrap}>
                <Animated.Image source={reaction.src} style={[styles.smiley]} />
              </View>

              <Animated.Text style={[styles.reactionText]}>
                {reaction.label}
              </Animated.Text>
            </TouchableOpacity>
          );
        })}
      </View>
    );

only when this.state.interacted is true, render the original return of the component

can you elaborate the full code?