Load random screen w/ React Native Navigation - react-native

Question

I'm trying to build an app in react native where you hit a button and it loads a random screen. Pretty simple, but I can't get the navigator working.
import React from 'react';
import {
AppRegistry,
Text,
View,
Button,
StyleSheet,
Image,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import Slide0 from './slides/0';
import Slide1 from './slides/1';
import Slide2 from './slides/2';
randomScreen = Math.floor(Math.random() * 2);
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Home',
};
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<Image
source={require('./assets/icons/app-icon.png')}
/>
<Text style={{ marginTop: 100 }}>Welcome to Dementia Care Activities.</Text>
<Text style={{ marginTop: 100 }}>{randomScreen}</Text>
<Button
onPress={() => navigate('Slide0')}
title="Load Random Slide"
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
const SimpleAppNavigator = StackNavigator({
Home: { screen: HomeScreen },
Slide0: { screen: Slide0 }
});
const AppNavigation = () => (
<SimpleAppNavigator />
);
export default class App extends React.Component {
render() {
return (
<AppNavigation/>
);
}
}
So I'm trying to set randomScreen to a number, and that does work and I can see it in the , but I just cant figure out how to insert that number into
const SimpleAppNavigator = StackNavigator({
Home: { screen: HomeScreen },
Slide0: { screen: SlideINSERT-RANDOM-NUMBER }
});

Answer 1

You could just create a list of Screen objects. It may seem redundant since you are including integers to differentiate the Screen objects, but if you ever decide to change those object names to something different, the map will already have you covered. So something like:
const screens = [Screen0, Screen1]
Then:
const SimpleAppNavigator = StackNavigator({
Home: { screen: HomeScreen },
Slide0: { screen: screens[randomScreen] }
});