react native: How can I change a view when i click a button from another page?

Question

I want to change the SafeAreaView style when I press button from another page and when I press the button again so it return back the old style of the SafeAreaView . I would love some help with it .

this is the Reshima page

function Reshima({ paramsList = { list: [] } }) {


return (
      <SafeAreaView style={styles.flat}>
        <FlatList
          data={filteredList}
          renderItem={({ item, index }) => renderItem({ index, item })}
          keyExtractor={(item) => item.Water_Source_Code.toString()}
          ListEmptyComponent={EmptyListMessage}
        />
      </SafeAreaView>
)}

this is AppNavigator page of the button :

const HomeStack = () => {

<TouchableOpacity onPress={() => {
                  dispatch(setFilterViewVisible(true));
                }}>
                  <Icon
                    color="white"
                    style={styles.homeIcon}
                    name={
                      Platform.OS === 'android'
                        ? 'md-search-outline'
                        : 'md-search-outline'
                    }
                    size={30}
                  />
                </TouchableOpacity>
}

Answer 1

onPress function will give a prop which gives the index of the corresponding ToggleButton Pressed , if 1st button is pressed it gives 0, else it gives 1 through this you can toggle the view,

here is an example: https://snack.expo.io/@ashwith00/humiliated-bacon

const select_radio_props = [
  { label: 'first', value: 0 },
  { label: 'second', value: 1 },
];

export default () => {
  const [value1, onChangeText1] = React.useState('');
  const [value2, onChangeText2] = React.useState('');
  const [value3, onChangeText3] = React.useState('');
  const [initialRadioForm, setInitialRadioForm] = useState(0);
  const [visible, setVisible] = useState(false);

  return (
    <>
      <ScrollView
        behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
        style={styles.container}>
        <View style={styles.MainScreen}>
          <View style={styles.WhereToCheckTextView}>
            <Text style={styles.WhereToCheckText}>where</Text>
          </View>
          <View style={styles.RadioFormView}>
            <RadioForm
              formHorizontal={true}
              selectedButtonColor="black"
              buttonColor={'black'}
              animation={true}
              labelHorizontal={true}
              labelStyle={{
                fontSize: 18,
                left: 5,
                color: 'black',
              }}
              buttonSize={20}
              radio_props={select_radio_props}
              initial={initialRadioForm}
              onPress={(val) => {
                setVisible(val === 1);
              }}
            />
          </View>
          {visible && (
            <View style={{ width: 200, height: 100, backgroundColor: 'red' }} />
          )}
        </View>
      </ScrollView>
    </>
  );
};