react-native router flux Actions is not navigating to other page

Question

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>
      )
   }
};

Answer 1

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