How to change initial value with state?

[hristowwe]

I am trying to render the initial value. I have a few radio buttons that I want to keep their previous choice. Unfortunately, this does not work properly and there is always the first choice. I keep choices in array and I don't know if that's right? So my code so far -

import React from "react";
import { Button, SafeAreaView, Text, View } from "react-native";
import BouncyCheckboxGroup from "react-native-bouncy-checkbox-group";

const _iconStyle = (borderColor) => ({
  height: 50,
  width: 50,
  borderRadius: 25,
  borderColor: borderColor,
});

const styles = {
  container: { marginTop: 24 },
  verticalStyle: { borderWidth: 2, borderRadius: 4, margin: 10, padding: 10 },
  textStyle: { textDecorationLine: "none" },
  iconImageStyle: { height: 20, width: 20 },
};

const verticalStaticData = [
  {
    id: 0,
    text: "Watermelon Watermelon ",
    fillColor: "#ff7473",
    unfillColor: "#fbbfbb",
    iconStyle: _iconStyle("#fbbfbb"),
    textStyle: styles.textStyle,
    style: styles.verticalStyle,
    iconImageStyle: styles.iconImageStyle,
  },
  {
    id: 1,
    text: "Ultramarine Blue",
    fillColor: "#5567e9",
    unfillColor: "#afb5f5",
    iconStyle: _iconStyle("#afb5f5"),
    textStyle: styles.textStyle,
    style: styles.verticalStyle,
    iconImageStyle: styles.iconImageStyle,
  },
  {
    id: 2,
    text: "Soft Purple",
    fillColor: "#a98ae7",
    unfillColor: "#cab6f4",
    iconStyle: _iconStyle("#cab6f4"),
    textStyle: styles.textStyle,
    style: styles.verticalStyle,
    iconImageStyle: styles.iconImageStyle,
  },
];

const App = () => {
  const [val, setVal] = React.useState([null, null, null]);
  const ref = React.useRef(0);
  const verticalCheckboxGroupContainer = () => (
    <>
      <View style={{ marginLeft: 32, marginTop: 24 }}>
        <Text style={{ color: "#a8a8ac", fontWeight: "500", fontSize: 16 }}>
          Pick your favorite color (Horizontal Style)
        </Text>
      </View>
      <View
        style={{
          marginTop: 16,
          marginLeft: 32,
          justifyContent: "center",
        }}
      >
        <BouncyCheckboxGroup
          initial={val[ref.current]}
          data={verticalStaticData}
          style={{ flexDirection: "column" }}
          onChange={(selectedItem) => {
            const some_array = [...val];
            some_array[ref.current] = selectedItem.id;
            setVal(some_array);
            alert(ref.current);
          }}
        />

        <Button
          title={"next"}
          onPress={() => {
            ref.current++;
          }}
        />
        <Button
          title={"back"}
          onPress={() => {
            ref.current--;
          }}
        />
      </View>
    </>
  );

  return (
    <>
      <SafeAreaView>
        <View style={styles.container}>{verticalCheckboxGroupContainer()}</View>
      </SafeAreaView>
    </>
  );
};

export default App;

So my idea is to keep choices in array and when i go back to the previous step (using ref in my code) to check radio button with that id. So ids of radio buttons will be in that array (val).

[hristowwe]

code in expo snack - https://snack.expo.dev/@prororype/radiobuttons

[WrathChaos]

Hello @hristowwe Do you want to set different checkbox buttons' initial value as true? if yes, you should not use group library. You should use the react-native-bouncy-checkbox itself and then you can set their initial values one by one