React native open an activity - reactjs

Question

I am an Android developer who works with Android Studio most.
I started with my first react-native project for iOS and I want to know how is it possible to have one screen with a button that when the user clicks takes him to another screen (or activity in an android way) which has a hello message.
I would be really obliged to anyone that can help because I am really new to React and React-Native.
I have tried the following code but I get the following error.
My code is the following:
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, Button } from 'react-native';
import { createStackNavigator } from 'react-navigation';
import Settings from './Settings';
import Home from './Home';
const AppNavigator = createStackNavigator({
HomeScreen: { screen: Home },
SettingScreen: { screen: Settings },
});
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Image style={styles.image} source={require('./assets/adc.png')} />
<Text style={styles.adc}>Aratos Disaster Control</Text>
<Button title="Settings" onPress = {() => this.props.navigation.navigate('SettingScreen')} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
adc:{
fontWeight: 'bold',
marginTop: 20
},
image:{
width: 80,
height: 100
}
});
// Home.js
import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
export class Home extends Component {
render() {
return (
<View>
<Text>This is the home screen</Text>
<Button title="Settings" onPress={() => this.props.navigation.navigate('SettingScreen')} />
</View>
)
}
}
export default Home
// Settings.js
import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
export class Settings extends Component {
render() {
return (
<View>
<Text>This is the Settings screen</Text>
</View>
)
}
};
export default Settings;

Answer 1

For navigate between pages, you can use React Navigation or react-native-router-flux or other packages. You have to define the structure of your navigation and then navigate to each page using this packages. Read guides for more information.