My function onPressreturn undefined is not a object
This is my code :
import React, {Component} from 'react';
import {Image, Platform, StatusBar, ListView, TouchableHighlight} from 'react-native';
import {connect} from 'react-redux';
import {Actions} from 'react-native-router-flux';
import {
Container,
Content,
Text,
Icon,
View,
Left,
Right,
Header,
Body,
Title,
Animated
} from 'native-base';
import styles from './styles';
class Championnat extends Component {
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows([
{slug : 'team', name : 'Liqgue1'},
{slug : 'worldcup', name : 'Coupe du monde'},
]),
};
}
pressRow(data) {
console.log(data);
}
renderRow(data){
return (
<TouchableHighlight onPress={()=> this.pressRow(data)}>
<View style={styles.lstView}>
<Image style={styles.lstPicto} />
<Text style={styles.lstText}>{data.name}</Text>
<Icon name="angle-right" right style={styles.lstIcon} />
</View>
</TouchableHighlight>
)
}
render() {
return (
<Container style={styles.container}>
<Header style={styles.header}>
<Left>
<Button transparent onPress={() => Actions.pop()}>
<Icon active name="angle-left"/>
</Button>
</Left>
<Body>
<Title>Choisir un championnat</Title>
</Body>
<Right></Right>
</Header>
<View style={{flex: 1}}>
<ListView
dataSource={this.state.dataSource}
renderRow = {this.renderRow.bind(this)}
></ListView>
</View>
</Container>
)
}
}
export default connect()(Championnat);
Inside of your constructor you need to bind() your function, or use arrow functions.
constructor() {
// your code
this.pressRow = this.pressRow.bind(this);
}
Otherwise, declare your function as an arrow function.
pressRow = (data) => {
// your code
}
change renderRow(data) as arrow function like below snippet
renderRow = (data) => {
// your logic
}
and make sure you pressRow function should be arrow function
pressRow = (data) => {
console.log(data);
}
Hope this will work. :)
This is my screen when i tape on TouchableHighlight. The pb exist only on TouchableHighlight if i change TouchableHighlight for Button, there is no pb.
But on offical doc (https://facebook.github.io/react-native/docs/listview.html), react ask to use TouchableHighlight on listView
try this one.. it should work.. when you render a listView, each of you data belong to one unique ID..
pressRow(event) {
console.log(event);
}
renderRow(data, rowID){
return (
<TouchableHighlight key={rowID} onPress={()=> this.pressRow(rowID)}>
<View style={styles.lstView}>
<Image style={styles.lstPicto} />
<Text style={styles.lstText}>{data.name}</Text>
<Icon name="angle-right" right style={styles.lstIcon} />
</View>
</TouchableHighlight>
)
}
This is my entire code :
In renderRow, if i comment Button an decomment TouchableHighlight it doesn't work, if i comment TouchableHighlight and decomment Button, it'work's.
import React, {Component} from 'react';
import {Image, Platform, StatusBar, ListView, TouchableHighlight} from 'react-native';
import {connect} from 'react-redux';
import {Actions} from 'react-native-router-flux';
import {
Container,
Content,
Text,
Item,
Input,
Button,
Icon,
View,
Left,
Right,
Header,
Body,
Title,
Spinner,
Animated
} from 'native-base';
import styles from './styles';
import * as competition from '../../../services/competition';
class ContentLoaded extends Component {
render() {
return (
<Text>Hello {this.props.name}!</Text>
);
}
}
class Competition extends Component {
constructor(props) {
super(props);
this.pressRow = this.pressRow.bind(this);
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
}),
loaded: false,
};
this.fetchData();
}
/**
* Cherche les competitions
*/
fetchData = function() {
competition.getAll()
.then((data) => {
console.log(data);
this.setState({
dataSource: this.state.dataSource.cloneWithRows(data),
loaded: true,
});
})
.catch((exception) => {
console.log('competition controller 47', exception);
});
}
/**
* Click sur une competiotn
* #param data
*/
pressRow = (data, rowId) => {
console.log(data);
console.log(rowId);
}
/**
* render d'une ligne
* #param data
* #returns {XML}
*/
renderRow(data, rowId){
return (
//<TouchableHighlight key={rowID} style={styles.lstView} onPress={()=> this.pressRow(rowId)}>
<Button style={styles.lstView} onPress={()=> this.pressRow(data, rowId)}>
<Image style={styles.lstPicto} />
<Text style={styles.lstText}>{data.name}</Text>
<Icon name="angle-right" right style={styles.lstIcon} />
</Button>
//</TouchableHighlight>
)
}
/**
* Affichage conditionnek
* #returns {XML}
* #constructor
*/
ContentLoaded () {
if (!this.state.loaded) {
return <Text>
Loading movies...
</Text>
}
return <ListView
dataSource={this.state.dataSource}
renderRow = {this.renderRow.bind(this)}
></ListView>
}
/**
* Render
* #returns {XML}
*/
render() {
return (
<Container style={styles.container}>
<Header style={styles.header}>
<Left>
<Button transparent onPress={() => Actions.pop()}>
<Icon active name="angle-left"/>
</Button>
</Left>
<Body>
<Title>Choisir un championnat</Title>
</Body>
<Right></Right>
</Header>
<View style={{flex: 1}}>
{!this.state.loaded ? (
<Spinner size="small" color="#000000" />
) : (
<ListView
dataSource={this.state.dataSource}
renderRow = {this.renderRow.bind(this)}
></ListView>
)}
</View>
</Container>
)
}
}
export default connect()(Competition);
import React, {Component} from 'react';
import {Image, Platform, StatusBar, ListView, TouchableHighlight} from 'react-native';
import {connect} from 'react-redux';
import {Actions} from 'react-native-router-flux';
import {
Container,
Content,
Text,
Icon,
View,
Left,
Right,
Header,
Body,
Title,
Animated
} from 'native-base';
import styles from './styles';
class Championnat extends Component {
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows([
{slug : 'team', name : 'Liqgue1'},
{slug : 'worldcup', name : 'Coupe du monde'},
]),
};
}
pressRow(data) {
console.log(data);
}
renderRow(data){
return (
<TouchableHighlight onPress={()=> this.pressRow(data)}>
<View style={styles.lstView}>
<Image style={styles.lstPicto} />
<Text style={styles.lstText}>{data.name}</Text>
<Icon name="angle-right" right style={styles.lstIcon} />
</View>
</TouchableHighlight>
)
}
render() {
return (
<Container style={styles.container}>
<Header style={styles.header}>
<Left>
<Button transparent onPress={() => Actions.pop()}>
<Icon active name="angle-left"/>
</Button>
</Left>
<Body>
<Title>Choisir un championnat</Title>
</Body>
<Right></Right>
</Header>
<View style={{flex: 1}}>
<ListView
dataSource={this.state.dataSource}
renderRow = {this.renderRow.bind(this)}
></ListView>
</View>
</Container>
)
}
}
export default connect()(Championnat);
Related
I am trying to have a button cross out text with 'line-through'. I am not sure how to connect this to the button.
'''
import React, { useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
export default function App() {
const [name, setName] = useState('shaun')
const clickHandler = () => {
setName('shaun (CROSSED OUT)');
}
return (
<View style={styles.container}>
<Text>My name is {name}</Text>
<Text></Text>
<View style={styles.buttonContainer}>
<Button title='update state' onPress={clickHandler} />
</View>
</View>
);
}
You can use a state variable to keep track of it.
quick example -
import React, { useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
export default function App() {
const [name, setName] = useState('shaun')
const [crossedOut, setCrossedOut] = useState(false) // extra state variable
const clickHandler = () => {
setName('shaun (CROSSED OUT)');
setCrossedOut(true) // set it to true on click
}
return (
<View style={styles.container}>
{/* apply style only if crossedOut is true */}
<Text style={crossedOut && {textDecorationLine: 'line-through'}}>My name is {name}</Text>
<View style={styles.buttonContainer}>
<Button title='update state' onPress={clickHandler} />
</View>
</View>
);
}
I'm rendering the data got from an API into the Cards, I created a CardContainers component that map the data I get from the API then use that component in another component.
CardContainers.js
import React from 'react';
import {View} from 'react-native';
import {withNavigation} from 'react-navigation';
class CardContainers extends React.Component{
addPlace(){
return this.props.addPlace;
}
renderCards(){
return this.props.data.map((item, index) => {
return (
<View key={index}>
{this.props.renderCard(item)}
</View>
)
})
}
render(){
return(
<View>{this.renderCards()}</View>
)
}
}
PlacesList.js
import React from 'react';
import ProgressiveInput from 'react-native-progressive-input';
import {StyleSheet, View, Alert, Text, TouchableOpacity, ListView, ScrollView} from 'react-native';
import {Button, Card, Icon} from 'react-native-elements';
import {connect} from 'react-redux';
import CardContainers from './CardContainers';
import * as placesActions from '../redux/actions/placesActions';
const ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2,
});
class PlacesList extends React.Component{
static navigationOptions = ({navigation}) => {
return {
title:'Finding new places',
}
}
constructor(props){
super(props)
const position = this.props.navigation.getParam('position')
const tripId = JSON.stringify(this.props.navigation.getParam('tripId')).replace(/\"/g,"");
const date = JSON.stringify(this.props.navigation.getParam('date')).replace(/\"/g,"");
this.state={
position: position,
tripId: tripId,
date: date,
dataSource:ds.cloneWithRows([]),
}
}
renderCard(item){
return(
<Card
key={item.id}
title={item.title}
titleStyle={styles.title}
containerStyle={{marginTop: 20, marginBottom:20}}
>
<View style={{flexDirection: 'row'}}>
<Text style={{margin:10}}>
Category: {item.category.title}
</Text>
<Text style={{margin:10}}>
Rating: {item.averageRating}
</Text>
</View>
<View style ={{flexDirection:'row', alignItems:'center', alignSelf:'center'}}>
<Button
icon={<Icon name='add' color='#ffffff'/>}
buttonStyle={{marginLeft:15, borderRadius:10}}
title='ADD THIS PLACE'
type='solid'
onPress={()=>this.props.addPlace()}
/>
</View>
</Card>
);
}
getPlacesAroundDestination = () => {
this.props.aroundPlaces(this.state.position);
this.setState({dataSource: ds.cloneWithRows(this.props.placesAround)})
}
autoComplete = async(query) => {
this.setState({destination: query})
await this.props.suggestPlaces(this.state.position, query)
this.setState({dataSource: ds.cloneWithRows(this.props.searchSuggests)})
}
inputCleared = () => {
this.setState({
destination:'',
isLoading: false,
dataSource: ds.cloneWithRows({}),
});
}
onListItemClicked = (searchSuggests) => {
this.setState({
title: searchSuggests.title,
placeId: searchSuggests.id,
openingHours: searchSuggests.openingHours,
category: searchSuggests.category,
position:searchSuggests.position.toString(),
dataSource:ds.cloneWithRows([]),
})
}
renderRow = (searchSuggests) => {
return(
<TouchableOpacity
style={{padding:10}}
onPress={()=>this.onListItemClicked(searchSuggests)}
>
<Text style={{fontSize:20}}>{searchSuggests.title}</Text>
<Text style={{fontSize:10}}>{searchSuggests.vicinity}</Text>
</TouchableOpacity>
)
}
renderSeparator = () => {
return <View style={{borderWidth:0.5, borderColor:'lightgrey',}}> </View>
}
renderContent(){
return (
<CardContainers
data={this.props.placesAround.items}
renderCard={this.renderCard}
/>
)
}
render(){
return(
<View style={styles.container}>
<ProgressiveInput
style={{marginTop:20, marginLeft:10, marginRight:10}}
placeholder='Your destination...'
value={this.state.destination}
isLoading={this.props.isLoading}
onChangeText={this.autoComplete}
onInputCleared={this.inputCleared}
/>
<View style={{flex:0}}>
<ListView
enableEmptySections
style={{backgroundColor:'white', margin:20}}
dataSource={this.state.dataSource}
renderRow={this.renderRow}
renderSeparator={this.renderSeparator}
/>
</View>
<Button
title= 'SUGGEST'
style={{alignSelf:'center'}}
onPress={() => this.props.aroundPlaces(this.state.position)}
/>
<ScrollView>
{this.props.placesAround.items? this.renderContent():null}
</ScrollView>
</View>
)
}
}
const mapStateToProps = (state) => {
return{
searchSuggests: state.places.searchSuggests,
isLoading: state.places.isLoading,
placesAround: state.places.placesAround,
geolo: state.location.latitude + ',' + state.location.longitude,
}
}
const mapDispatchToProps = (dispatch) => {
return {
addPlace:(tripId, date, title, category, rating, placeID) => dispatch (placesOfPlanActions.addPlace(tripId, date, title, category, rating, placeID)),
aroundPlaces: (geolo) => dispatch(placesActions.aroundPlaces(geolo)),
suggestPlaces: (geolo, destination) => dispatch(placesActions.suggestPlaces(geolo, destination))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(PlacesList);
As you can see in the code below, I want to call the addPlace() function which is a redux action in the onPress event of each Card rendered, but I cannot do it because the CardContainers does not have that function inside. So is there any way that I can do it? I'm quite new to react-native and redux, just spent 4 months on this and I do not think that I fully understand it.
Yup, simply add the connect HOC to CardContainers and you should be able to set the function in mapDispatchToProps like you did in PlacesList.
I'm trying to get the images inside my getImageForLogo.js to load through a loop.
That file looks like so:
const images = {
logo1: require('../assets/logo1.jpeg'),
logo2: require('../assets/logo2.png'),
'logo with space': require('../assets/logo-with-space.jpeg'),
};
export default logos => images[logos];
My App.js:
import React from 'react';
import {
StyleSheet,
View,
Image,
ScrollView,
Text
} from 'react-native';
import getImageForLogo from './utils/getImageForLogo';
import Avatar from './components/Avatar';
export default class App extends React.Component {
constructor (props) {
super(props);
this.state = {
logos: 'logo1'
};
}
render () {
const {
logos
} = this.state;
const form = { 'Logo1': 'assets/logo.jpg', 'Logo2': 'assets/logo2.jpg', 'Logo3': 'assets/logo3.jpg' };
return (
<View style={styles.appContainer}>
<View style={styles.titleContainer}>
<Text style={styles.title}>Title</Text>
</View>
<ScrollView style={styles.timerlist}>
Object.values(form).map((key, val) => (
<Avatar
initials="KC"
size={75}
key={val}
source={key}
backgroundColor={'blue'}
onPressLinkImage={() => {
console.log('Pressed!');
}}
/>
));
</ScrollView>
</View>
);
}
}
I created the const form just to try and see if the loop works. I'm trying to cycle by using:
Object.values(form).map((key, val) => (
<Avatar
initials="KC"
size={75}
key={val}
source={key}
backgroundColor={'blue'}
onPressLinkImage={() => {
console.log('Pressed!');
}}
/>
));
however, when I run this, the app crashes and says ReferenceError: Can't find variable: val. I can't figure out why this happens because if I run this code on the Chrome terminal, it works.
EDIT:
Here's Avatar.js:
import {
ColorPropType,
StyleSheet,
Text,
View,
Image,
TouchableOpacity
} from 'react-native';
import PropTypes from 'prop-types';
import React from 'react';
import getImageForLogo from '../utils/getImageForLogo';
export default function Avatar({
size,
backgroundColor,
initials,
source,
onPressLinkImage,
}) {
const style = {
width: size,
height: size,
borderRadius: size / 2,
backgroundColor,
};
const image = getImageForLogo(source)
return (
<View style={[styles.container, style]}>
<TouchableOpacity onPress={onPressLinkImage}>
<Image source={image} style={styles.image} />
</TouchableOpacity>
</View>
);
}
Avatar.propTypes = {
initials: PropTypes.string.isRequired,
size: PropTypes.number.isRequired,
source: PropTypes.string.isRequired,
backgroundColor: ColorPropType.isRequired,
onPressLinkImage: PropTypes.func.isRequired,
};
Your code in the App.js appears to be missing some { } around your Object.values.
So instead of putting inside your ScrollView
Object.values(form).map((key, val) => (
<Avatar
initials="KC"
size={75}
key={val}
source={key}
backgroundColor={'blue'}
onPressLinkImage={() => {
console.log('Pressed!');
}}
/>
)
);
you should put
{Object.values(form).map((key, val) => (
<Avatar
initials="KC"
size={75}
key={val}
source={key}
backgroundColor={'blue'}
onPressLinkImage={() => {
console.log('Pressed!');
}}
/>
)
)}
notice that it is contained inside the { }.
Here is it inside your App.js
import React from 'react';
import {
StyleSheet,
View,
Image,
ScrollView,
Text
} from 'react-native';
import getImageForLogo from './utils/getImageForLogo';
import Avatar from './components/Avatar';
export default class App extends React.Component {
constructor (props) {
super(props);
this.state = {
logos: 'logo1'
};
}
render () {
const {
logos
} = this.state;
const form = { 'Logo1': 'assets/logo.jpg', 'Logo2': 'assets/logo2.jpg', 'Logo3': 'assets/logo3.jpg' };
return (
<View style={styles.appContainer}>
<View style={styles.titleContainer}>
<Text style={styles.title}>Title</Text>
</View>
<ScrollView style={styles.timerlist}>
{Object.values(form).map((key, val) => (
<Avatar
initials="KC"
size={75}
key={val}
source={key}
backgroundColor={'blue'}
onPressLinkImage={() => {
console.log('Pressed!');
}}
/>
))}
</ScrollView>
</View>
);
}
}
Also note your Object.values(form).map((key, val) will give the following keys and values
key | val
assets/logo.jpg | 0
assets/logo1.jpg | 1
assets/logo2.jpg | 2
For readability of your code I would change your code to the following:
{Object.values(form).map((source, key) => (
<Avatar
initials="KC"
size={75}
key={key}
source={source}
backgroundColor={'blue'}
onPressLinkImage={() => {
console.log('Pressed!');
}}
/>
)
)}
i am using drawer from native base for my react native application. when u click the menu button the drawer not open up and i get this error ( _this._drawer.open ) is not a fucntion what is the isse here is my code
import React, { Component } from 'react';
import {
AppRegistry,View
} from 'react-native';
import {ScrollableTab,TabHeading, Drawer, Container,Content, Header,
Title, Button, Left, Right, Body, Icon ,Text,Tab, Tabs } from 'native-base';
import SecondStatus from './component/StatusComponent';
import HeaderComponent from './component/headerComponent';
import Sports from './component/Sports';
import MainPage from './component/MainPage';
import SideBar from './component/SideBar';
export default class Point extends Component {
closeDrawer = () => {
this.drawer.close()
};
openDrawer = () => {
alert('asasa click');
console.log('asad--');
this._drawer.open();
};
render() {
return (
<Container>
<Drawer
ref={(ref) => { this._drawer = ref; }}
content={<SideBar />}
onClose={() => this.closeDrawer()} >
<Header >
<Left>
<Button transparent onPress={this.openDrawer}>
<Icon name='arrow-back' />
</Button>
</Left>
<Body>
<Title>UrduPoint</Title>
</Body>
<Right>
<Button transparent onPress=
{this.openDrawer.bind(this)}>
<Icon name='menu' />
</Button>
</Right>
</Header>
</Drawer>
</Container>
);
}
}
AppRegistry.registerComponent('Point', () => Point);
here is my SideBar.js
import React, { Component } from 'react';
import {
Text,
View,
StyleSheet
} from 'react-native';
export default class SideBar extends Component{
render(){
return(
<View>
<Text>
asad
</Text>
</View>
)
};
}
ps. this drawer is same as in npm 'react-native-drawer'
According to the native base documentation, you should call:
this.drawer.root.open()
I have used react-native-drawer this npm thats work for me
Here is a very basic working example using native-base
import React, { Component } from 'react';
import {
Container,
Header,
Left,
Button,
Icon,
Body,
Title,
Right,
Content,
Drawer,
Text
} from 'native-base';
import {
StyleSheet,
View,
ScrollView
} from 'react-native';
class SideBar extends Component {
render() {
return (
<Container>
<Content
bounces={false}
style={{ flex: 1, backgroundColor: '#fff', top: -1 }}
>
<Button transparent>
<Text>Action</Text>
</Button>
</Content>
</Container>
);
}
}
export default class Core extends Component {
openDrawer() {
this._drawer._root.open();
}
closeDrawer() {
this._drawer._root.close();
}
render() {
return (
<Drawer
ref={(ref) => { this._drawer = ref; }}
content={<SideBar navigator={this._navigator} />}
onClose={() => this.closeDrawer()}
>
<Container>
<Header>
<Left>
<Button
transparent
onPress={() => this.openDrawer()}
>
<Icon name='menu' />
</Button>
</Left>
<Body>
<Title>TITLE</Title>
</Body>
<Right />
</Header>
<Content>
</Content>
</Container>
</Drawer>
);
}
}
Here is the sample example of NativeBase Drawer provided in its docs with a note saying You need to create your own SideBar component and import it.
Drawer Sample Code
import React, { Component } from 'react';
import { Drawer } from 'native-base';
import SideBar from './yourPathToSideBar';
export default class DrawerExample extends Component {
render() {
closeDrawer = () => {
this.drawer._root.close()
};
openDrawer = () => {
this.drawer._root.open()
};
return (
<Drawer
ref={(ref) => { this.drawer = ref; }}
content={<SideBar navigator={this.navigator} />}
onClose={() => this.closeDrawer()} >
// Main View
</Drawer>
);
}
}
Check for Sidebar Sample Code from NativeBase-KitchenSink
this._drawer._root.open()
is working for me
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
TouchableOpacity,
Image,
Button
} from 'react-native';
import Actions from 'react-native-router-flux';
import First from './First';
export default class Home extends Component{
componentWillMount() {
}
render(){
return(
<View>
<View style={{height:220,backgroundColor:'#DCDCDC'}}>
<Image style={{width:120,height:120,top:50,left:120,backgroundColor:'red'}}
source={require('./download.png')} />
</View>
<View style={{top:30}}>
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<TouchableOpacity style= { styles.views}
onPress = {()=>{ Actions.First({customData: 'Hello!'}) }}>
<Text style={{fontSize:20, textAlign:'center',color:'white',top:20}}> Profile </Text>
</TouchableOpacity>
<TouchableOpacity style= { styles.views1} >
<Text style={{fontSize:20, textAlign:'center',color:'white',top:20}}> Health Tracker </Text>
</TouchableOpacity>
</View>
</View>
</View>
);
}
}
In the above code, Actions in not working means not navigating to First.js page, how can i edit my code, and i have not written anything in ComponentWillMount() function, what i should write inside that?ataomega
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
TouchableOpacity
} from 'react-native';
import Home from './Home';
export default class Prof extends Component{
constructor(){
super()
}
render(){
return (
<Navigator
initialRoute = {{ name: 'Home', title: 'Home' }}
renderScene = { this.renderScene }
navigationBar = {
<Navigator.NavigationBar
style = { styles.navigationBar }
routeMapper = { NavigationBarRouteMapper } />
}
/>
);
}
renderScene(route, navigator) {
if(route.name == 'Home') {
return (
<Home
navigator = {navigator}
{...route.passProps}
/>
)
}
}
}
var NavigationBarRouteMapper = {
LeftButton(route, navigator, index, navState) {
if(index > 0) {
return (
<View>
<TouchableOpacity
onPress = {() => { if (index > 0) { navigator.pop() } }}>
<Text style={ styles.leftButton }>
Back
</Text>
</TouchableOpacity>
</View>
)
}
else { return null }
},
RightButton(route, navigator, index, navState) {
if (route.openMenu) return (
<TouchableOpacity
onPress = { () => route.openMenu() }>
<Text style = { styles.rightButton }>
{ route.rightText || 'Menu' }
</Text>
</TouchableOpacity>
)
},
Title(route, navigator, index, navState) {
return (
<Text style = { styles.title }>
{route.title}
</Text>
)
}
};
First of all I recommend you to create a rounter component and make your app launch from there:
Something like this
import { Scene, Router, ActionConst } from 'react-native-router-flux';
import First from 'yourRoute';
const RouterComponent = () => {
<Router>
<Scene
key="First"
component={First}
initial />
... your other scenes
</Router>
}
export default RouterComponent;
then in your index page or wherever you load from just add this component
import React, { Component } from 'react'
import RouterComponent from './Router'
class AppContainer extends Component {
render() {
return (
<RouterComponent />
);
}
}
export default AppContainer;
now you can call it from your code. Any doubts ask them :P