How to use the same array in different screens in react native?-CodePudding

I have an array, which I want to use in different screens. I have tried to pass it as a navigation param, but only one parameter of my array gets passed to the next screen. I have read, that I could define the array globally or use Redux, but I think, that this would be an overkill in my specific case. Additionally Ive read about something called flux, but I havent found a solution for my case. Isn't there a simpler methode to pass my complete array to the Next screen, so that I could use the Array in the Next Screen.js file? I would be very thankful for some help. Here is my code:

App.js

export default function App() {
const Stack = createNativeStackNavigator();
return (
<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="Menu" component={Menu} />
    <Stack.Screen name="NextScreen" component={NextScreen} />
  </Stack.Navigator>
</NavigationContainer>
);
}

Menu.js

 export default function Menu({ navigation }) {
const [array, setArray] = useState(
 {text: '1', gender: 'm', key:'1'},
 {text: '2', gender: 'm', key:'2'},
 {text: '3', gender: 'm', key:'3'}
)
const navigate = () => {
navigation.navigate('NextScreen')
}
return(
<View>
  <Button title='NextScreen' onPress={navigate}></Button>
</View>   
)
}

NextScreen.js

export default function NextScreen({ navigation }) {

return(
    <View>

    </View>
)
}

CodePudding user response：

You can just declare array in a file and import it from different screens.

data.js

const Users = [
  { text: '1', gender: 'm', key: '1' },
  { text: '2', gender: 'm', key: '2' },
  { text: '3', gender: 'm', key: '3' },
];

export { Users };

Menu.js

import { Users } from './data';
...
...

NextScreen.js

import { Users } from './data';
...
...

CodePudding user response：

Not quite sure why it does not work when you pass it as params to NextScreen. Try with my implementation below:

StackNavigator

export interface Human {
  text: string;
  gender: string;
  key: number;
}

export type RootTabParamList = {
  Menu: undefined;
  NextScreen: {
    humans: Human[] | undefined;
  };
};

const StackExample = createNativeStackNavigator<RootTabParamList>();

function StackNavigator() {
  return (
    <StackExample.Navigator initialRouteName="Menu">
      <StackExample.Screen name="Menu" component={Menu} />
      <StackExample.Screen
        name="NextScreen"
        component={NextScreen}
        initialParams={{ humans: undefined }}
      />
    </StackExample.Navigator>
  );
}

Menu

export default function Menu({
  navigation,
}: NativeStackScreenProps<RootTabParamList, "Menu">) {
  const [humans, setHumans] = useState<Human[]>([
    {
      text: "Homer Simpson",
      gender: "male",
      key: 0,
    },
    {
      text: "Marge Simpson",
      gender: "female",
      key: 1,
    },
  ]);

  return (
    <View style={styles.container}>
      <Button
        title="Go to NextScreen"
        onPress={() => {
          navigation.navigate("NextScreen", { humans: humans });
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
});

NextScreen

export default function NextScreen({
  route: { params },
}: NativeStackScreenProps<RootTabParamList, "NextScreen">) {
  console.log("params.humans", params.humans);

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
});