Develop Reference

React Native - How to manage the native back button with Drawer Navigation

I recreated the Drawer Navigation following this code: https://github.com/mariodev12/react-native-menu-drawer-navigator
Everything works correctly but now I do not know how to handle the native button to go back .. I would like to always return to the previous page, but if you press twice in the home exit the app.
This is my Code:
App.js
import React from 'react';
import {StackNavigator} from 'react-navigation';
import DrawerStack from './src/stacks/drawerStack';
const Navigator = StackNavigator({
drawerStack: {screen: DrawerStack}
}, {
headerMode: 'none',
initialRouteName: 'drawerStack'
})
export default Navigator
drawerStack.js
import React from 'react'
import {StackNavigator, DrawerActions} from "react-navigation";
import {Text, View, TouchableOpacity} from 'react-native';
import Home from "../components/home";
import DrawerScreen from "./drawerScreen";
const DrawerNavigation = StackNavigator({
DrawerStack: {screen: DrawerScreen}
}, {
headerMode: 'float',
navigationOptions: ({navigation}) => ({
headerStyle: {
backgroundColor: 'rgb(255,45,85)',
paddingLeft: 10,
paddingRight: 10
},
title: 'Home',
headerTintColor: 'white',
headerLeft: <View>
<TouchableOpacity
onPress={() => {
if (navigation.state.isDrawerOpen === false) {
navigation.dispatch(DrawerActions.openDrawer());
} else {
navigation.dispatch(DrawerActions.closeDrawer());
}
}}>
<Text>Menu</Text>
</TouchableOpacity>
</View>
})
})
export default DrawerNavigation;
drawerScreen.js
import {DrawerNavigator} from 'react-navigation'
import Home from '../components/home';
import Login from '../components/login';
import Contacts from '../components/contacts';
import News from '../components/news';
const DrawerScreen = DrawerNavigator({
Home: {screen: Home},
Login: {screen: Login},
Contacts: {screen: Contacts},
News: {screen: News}
}, {
headerMode: 'none',
initialRouteName: 'Home'
})
export default DrawerScreen;
news.js "Example of one page"
import React from "react";
import {Text, View} from 'react-native';
export default class News extends React.Component {
render() {
return (
<View>
<Text> Here Leave the News!! </Text>
</View>
);
}
}
Now, how do I insert the back button in the header instead of the classic menu (DrawerStack) for only the 'News.js' page?

In Android you have to handle back button actions by yourself with BackHandler from react-native.
First of all
import { BackHandler } from 'react-native';
in ComponentDidMount add an event listener to listen for backpress:
componentDidMount() {
BackHandler.addEventListener("hardwareBackPress", this.onBackPress);
}
in ComponentwillUnmount make sure you remove the listener:
componentWillUnmount() {
BackHandler.removeEventListener("hardwareBackPress", this.onBackPress);
}
then
onBackPress = () => {
//inside here do what you want with single back button
}
Checkout this link too:
https://reactnavigation.org/docs/en/drawer-based-navigation.html
If you want to go back to previous Screen with back button drawer navigation isn't for you and you should try to use Stack Navigator.

You need create the button in your news screen too, like this.
import React from "react";
import {Text, View} from 'react-native';
export default class News extends React.Component {
static navigationOptions = ({navigation}) => {
return {
headerLeft: --- PUT HERE YOU CUSTOM BUTTON (Use navigation.goBack() in onPress)
}
}
render() {
return (
<View>
<Text> Here Leave the News!! </Text>
</View>
);
}
}
To make better, you can create a new screen with only your custom navigation options.

react native camera video feature how to record video

how do I do activate / use the video feature from https://github.com/lwansbrough/react-native-camera
Currently, I am able to take pictures but I would like to record videos instead. When I hit the Start recording text button, the app simply just crash and I have no idea how to get the error logs.
Below is the code I have written in attempt to record video
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
AppRegistry,
TouchableHighlight,
} from 'react-native';
import {StackNavigator} from 'react-navigation'
import Camera from 'react-native-camera'
export default class CameraScreen extends React.Component {
static navigationOptions = {
tabBarLabel: 'Camera'
};
render() {
return (
<View style={styles.container}>
<Camera
ref={(cam) => {
this.camera = cam;
}}
style={styles.preview}
aspect={Camera.constants.Aspect.fill}
//type = {Camera.constants.Type.front}
captureMode = {Camera.constants.CaptureMode.video}
keepAwake={true}
>
<Text style={styles.capture} onPress={this.takeVid.bind(this)}> Start recording </Text>
<Text style={styles.capture} onPress={this.stopVid.bind(this)}> Stop recording </Text>
</Camera>
</View>
);
}
takeVid() {
const option = {};
//options.location = ...
this.camera.capture({
mode: Camera.constants.CaptureMode.video
})
.then((data) => console.log(data))
.catch((err) => console.error(err));
}
stopVid(){
//console.log("I am pressed");
this.camera.stopCapture();
}
}

Return response error 500 React Native

I am using react-native framework for developing my small android app.I'm trying to redirect to Home.js from index.android.js.when i run it,it showing red error message on my Emulator
index.android.js
import React, { Component } from 'react';
import {AppRegistry,Text,View} from 'react-native';
import Home from 'App/Component/Home';
export default class mylApp extends Component {
render() {
return (
<View>
<Home />
</View>
);
}
}
AppRegistry.registerComponent('reactTutorialApp', () => reactTutorialApp);
Home.js
import React, { Component } from 'react';
import {Text,View} from 'react-native';
class Home extends Component {
state = {
myTxt: 'hiiiiiiiiiiiiiiiiiiiiiii';
}
render() {
return (
<View>
<Text>
{this.state.myTxt}
</Text>
</View>
);
}
}
export default Home;

Check with this import Path import Home from 'App/Component/Home';. I assume the Home.js is inside the Project(Folder) -> App (Folder) -> Component (Folder) -> Home.js. If it so then you need import like this import Home from './App/Component/Home';
Update 1:
index.android.js
import React, { Component } from 'react';
import {AppRegistry,Text,View} from 'react-native';
import Home from './App/Component/Home';
export default class mylApp extends Component {
render() {
return (
<View>
<Home />
</View>
);
}
}
AppRegistry.registerComponent('reactTutorialApp', () => mylApp);
Update 2
Home.js
import React, { Component } from 'react';
import {Text,View} from 'react-native';
class Home extends Component {
state = {
myTxt: 'hiiiiiiiiiiiiiiiiiiiiiii'
}
render() {
return (
<View>
<Text>
{this.state.myTxt}
</Text>
</View>
);
}
}
export default Home;

Picture doesn't display in react native (Android)

I just have started to learn React Native, and I'm following official tutorial, both in my emulator and phone (Android), image doesn't appear, just empty white screen. So my question, why it doesn't displayed on the screen? P.S: internet connection works fine.
import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';
class Bananas extends Component {
render() {
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
<Image source={pic} style={{width: 193, height: 110}}/>
);
}
}
AppRegistry.registerComponent('Bananas', () => Bananas);

You're doing the Image part correctly, I believe you just need to wrap it in a view.
import React, { Component } from 'react';
import { AppRegistry, Image, View } from 'react-native';
class Bananas extends Component {
render() {
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
<View style={{flex: 1}}>
<Image source={pic} style={{width: 193, height: 110}}/>
</View>
);
}
}
AppRegistry.registerComponent('Bananas', () => Bananas);

react-native / redux sent action, send reducer, but UI not updated

I am just learning react-native and how it works with redux. I have setup a store, setup a loginContainer, loginView. This view has a button that when it is clicked, i send an action / reducer to change the text of the button too "logged in". I was hoping I could get some insight into why I see the logs for the action / reducer, but nothing ever gets sent to the loginContainer to then re-render on the loginView.
Here is the code for loginView:
import { View, Platform, Text, TextInput, TouchableHighlight, Alert, Navigator} from 'react-native';
import React, { Component } from 'react';
import styles from './styles';
import MainView from '../MainView/mainview';
import loginReducers from '../../reducers';
import { createStore } from 'redux';
import * as loginActions from '../../actions/actions';
import { LOGIN } from '../../actions/actions';
class LoginView extends Component {
constructor(props)
{
super(props);
}
render() {
const {text, _loginPressed} = this.props;
return (
<View style={styles.container}>
<TextInput style={styles.textInput} placeholder={"Username.."}/>
<TextInput style={styles.textInput} placeholder={"Password.."}/>
<TouchableHighlight onPress={_loginPressed} style={styles.loginButton} underlayColor={'#2f9bd7'}>
<Text style={styles.loginButtonText}>{text}</Text>
</TouchableHighlight>
</View>
);
}
}
export default LoginView;
Login Container:
import { View, Platform, Text, TextInput, TouchableHighlight, Alert, Navigator} from 'react-native';
import React, { Component } from 'react';
import { createStore } from 'redux';
import { StyleSheet } from 'react-native';
import styles from './styles';
import loginReducers from '../../reducers';
import {LOGIN} from '../../actions/actions'
import LoginView from '../../components/Login/loginview';
import { connect } from 'react-redux';
import {bindActionCreators} from 'redux';
export default class LoginContainer extends Component {
constructor(props) {
super(props);
}
render() {
const {text} = this.props;
console.log(this.state);
return (
<LoginView
text={text}
_loginPressed={this._loginPressed.bind(this)}/>
);
}
}
const stateToProps = (state) => {
return {
state: this.state
}
}
const dispatchToProps = (dispatch) => {
return {
_loginPressed: () => {
dispatch(LOGIN())}
};
};
export default connect(stateToProps, dispatchToProps)(LoginView)
top view (setup.js):
import App from './components/App';
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import configureStore from './store';
const store = configureStore();
function setup() {
class Root extends Component {
render() {
return (
<Provider store={store}>
<App/>
</Provider>
);
}
}
return Root;
}
module.exports = setup;
App/index.js
import { View, Platform, Text, TextInput, TouchableHighlight, Alert, Navigator} from 'react-native';
import React, { Component } from 'react';
import styles from './styles';
import LoginContainer from '../../containers/Login/loginContainer';
import configureStore from '../../store';
class App extends Component {
render() {
return (
<Navigator
initialRoute={{name: 'LoginView', component: LoginContainer}}
renderScene={(route, navigator) => {
//creates new element with the component and navigator;]
if (route.component) {
return React.createElement(route.component, Object.assign({navigator }, {type: 'LoginView', text: 'Login'}));
}
}}
/>
);
}
}
export default App;