How to navigate to another activity when click on listitem - react-native

Question

How to navigate one page to another in react native. Here I want to navigate to my activity to another activity, When i click on list item this will navigate to another page You can check my code below
import React, {Component} from 'react';
import { StyleSheet, View, AppRegistry,} from 'react-native';
import { List, ListItem, Icon, Text } from 'native-base';
import { StackNavigator } from 'react-navigation';
import Adjective from './Topic/Adjective';
class BasicFlatList extends Component {
onSourcesSetting = () => {
this.props.navigation.navigate('Adj');
}
render(){
return(
<List>
<ListItem
button
noBorder
onPress={() => this.onSourcesSetting}>
<Text>Adjective</Text>
</ListItem>
</List>
);
}
}
const App = StackNavigator({
Adj: Adjective,
});
export default BasicFlatList;

Answer 1

You can create a new screen(component) and pass the name of that route and other required parameters to the function.
import React, {Component} from 'react';
import { StyleSheet, View, AppRegistry,} from 'react-native';
import { List, ListItem, Icon, Text } from 'native-base';
import { StackNavigator } from 'react-navigation';
import Adjective from './Topic/Adjective';
class BasicFlatList extends Component {
onSourcesSetting = () => {
this.props.navigation.navigate('AdjDetail', {
// require params(maybe adj id)
});
}
render(){
return(
<List>
<ListItem
button
noBorder
onPress={() => this.onSourcesSetting}>
<Text>Adjective</Text>
</ListItem>
</List>
);
}
}
class AdjectiveDetail extends React.Component {
render() {
console.log("props", this.props);
return null;
}
}
const App = StackNavigator({
Adj: Adjective,
AdjDetail: AdjectionDetail
});
export default BasicFlatList;
From the code i guess you are using react-navigation. You can go through the documentation for more details
P.S: react-native creates a single activity and entire app is run inside the single activity, there is no such thing as navigate from one activity to another like in android.