Как сделать пользовательскую радиокнопку с анимацией? Реагировать на родной

Вам нужно либо создать пользовательский компонент для радио, либо использовать x анимированную переменную для x переключателей.

Теперь создание переменной x для кнопок x не является эффективным решением, но его можно использовать, если у вас всего несколько кнопок.

Вы создали собственный компонент, который отображает плоский список, и в этом проблема; нельзя анимировать кнопки отдельно в том же компоненте, который вы используете для их рендеринга.

Вы должны разделить свой код и сделать переключатель самим компонентом. Что-то вроде этого (не проверял, но так должно работать):

export class RadioButton extends Component {
  constructor(props) {
    super(props);
    this.state = {
      radioSelected: this.props.selectedItemId,
    };
  }

  radioClick = id => {
    this.setState({ radioSelected: id });
    this.props.onChange(id);
  }

  renderRadioButton = item => {
    const { radioSelected } = this.state;
    const { labelLeftStyle, labelRightStyle, labelOnRight } = this.props;
    return (
      <AnimatedRadio
        {...item}
        isSelected={item.id === radioSelected}
        labelLeftStyle={labelLeftStyle}
        labelRightStyle={labelRightStyle}
        labelOnRight={labelOnRight}
        radioClick={this.radioClick}
      />
    );
  };

  render() {
    return (
      <FlatList
        data={this.props.radioOptions}
        extraData={this.state}
        renderItem={({ item }) => this.renderRadioButton(item)}
        keyExtractor={(item, index) => index.toString()}
      />
    );
  }
}

export class AnimatedRadio extends Component {
  springValue = new Animated.Value(1.1);

  onRadioClick = id => () => {
    const { radioClick } = this.props;
    radioClick(id);
    this.spring();
  };

  spring = () => {
    Animated.spring(this.springValue, {
      toValue: 0.95,
      friction: 2,
      tension: 15,
    }).start();
  };

  render() {
    const {
      id,
      label,
      labelLeftStyle,
      labelRightStyle,
      labelOnRight,
      isSelected,
    } = this.props;
    return (
      <View key={id} style={STYLES.radioContainerView}>
        <TouchableOpacity
          style={STYLES.radioButtonDirectionStyle}
          onPress={this.onRadioClick(id)}
        >
          {labelOnLeft == true ? (
            <Text style={[labelLeftStyle]}>{label}</Text>
          ) : null}

          <View
            style={[isSelected ? STYLES.selectedView : STYLES.unselectedView]}
          >
            {isSelected ? (
              <Animated.View
                style={[
                  STYLES.radioSelected,
                  { transform: [{ scale: this.springValue }] },
                ]}
              />
            ) : null}
          </View>

          {labelOnRight == true ? (
            <Text style={[labelRightStyle]}>{label}</Text>
          ) : null}
        </TouchableOpacity>
      </View>
    );
  }
}

Таким образом, каждое радио компонента будет иметь собственное анимированное значение и не будет мешать другим кнопкам.

Я сделал это, используя LayoutAnimation, как показано ниже.

LayoutAnimation.configureNext({
              duration: 300,
              create: {
                type: 'linear',
                property: 'scaleXY',
              },
              update: {
                type: 'spring',
                springDamping: 0.4,
                property: 'opacity',
              },
              delete: {
                type: 'easeOut',
                property: 'opacity',
              },
            });