I am using react-native-overlay-section. The bottom sheet is swipeable to the whole window but I want it to be swipeable to a particular height. How should I do? I have uploaded the code below:
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet
} from 'react-native';
import SlideUp from 'react-native-overlay-section';
export default class App extends Component {
constructor (props) {
super(props);
}
exampleContent = () => {
return (
<View >
<Text>This is test text</Text>
</View>
)
}
render() {
return (
<View style={{flex: 1}}>
<Text>Hello</Text>
<SlideUp
contentSection={this.exampleContent()}
draggableHeight={50}
/>
</View>
)
}
}
Here is the style:
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});
Related
I would like to create a simple navigation example on ReactNative.
Here is a code below;
import React, { Component } from 'react';
import { Button, View, Text } from 'react-native';
import { createStackNavigator } from 'react-navigation-stack';
class Home extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home</Text>
<Button
title="To the detail Page"
onPress={() => this.props.navigation.navigate('DetailScreen')}
/>
</View>
);
}
}
class Detail extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Detail Page</Text>
</View>
);
}
}
export default createStackNavigator({
HomeScreen: { screen: Home },
DetailScreen: { screen: Detail },
})
When I code like this, an error is occurred as Line12 this.props.navigation is undefined.
Does anyone have a solution?
Please try the below code :
import React, { Component } from 'react';
import { Button, View, Text } from 'react-native';
import {
createAppContainer
} from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
class Home extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home</Text>
<Button
title="To the detail Page"
onPress={() => this.props.navigation.navigate('DetailScreen')}
/>
</View>
);
}
}
class Detail extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Detail Page</Text>
</View>
);
}
}
const APpStack = createStackNavigator({
HomeScreen: { screen: Home },
DetailScreen: { screen: Detail },
})
const App = createAppContainer(APpStack);
export default App;
You can also check the working solution link expo
hope it helps. feel free for doubts
You need a constructor to define properties that are used for storing navigation data (among others):
class Home extends React.Component {
constructor(props) {
super(props);
// ...
}
I have a component that encapsulates three components one of them is the DrawerLayoutAndroid. Now I want to pass the reference of the drawer from the drawer component to the main component and then pass it to the header component so I can trigger it from the header component.
I have no idea how to do that.
Here is the main component 'cases.js'
import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import Header from '#components/header';
import BottomBar from '#components/bottom-bar';
import SideBar from '#components/drawer';
export default class Cases extends Component {
state = {
title : 'Cases'
}
change_text = () => {
this.setState({ title : 'Test' })
}
open_drawer = (ref) => {
ref.openDrawer();
}
close_drawer = (ref) => {
ref.closeDrawer();
}
render() {
return (
<SideBar style={ styles.container }>
<Header title={ this.state.title } change_text={ this.change_text } open={ this.state.side_bar } />
<View style={ styles.body }>
<Text style={ styles.text }> { this.state.name } </Text>
<TouchableOpacity onPress={ () => this.change_text() } style={ styles.button }>
<Text> Change State </Text>
</TouchableOpacity>
</View>
<BottomBar ref={ this.state.side_bar } />
</SideBar>
)
}
}
const styles = StyleSheet.create({
container : {
flex : 1,
flexDirection: 'column',
},
body : {
flex : 1,
backgroundColor: '#ccc',
justifyContent: 'center',
alignItems: 'center'
},
text : {
color : '#fff'
},
button : {
backgroundColor : '#eee',
paddingVertical: 5,
paddingHorizontal: 10
}
})
Here is my header:
import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';
import DrawerLayoutAndroid from 'DrawerLayoutAndroid';
import LinearGradient from 'react-native-linear-gradient';
export default class Header extends Component {
change_text = () => {
this.props.change_text();
}
open = ()
render () {
return (
<LinearGradient start={{x: 0, y: 0}} end={{x: 1, y: 0}} colors={['#a4d294', '#3ac6f3']} style={ styles.header }>
<TouchableOpacity onPress={ () => this.props.change_text() }>
<Image source={ require('#media/images/add.png') } style={ styles.add_button } />
</TouchableOpacity>
<Text style={ styles.title }> { this.props.title } </Text>
<TouchableOpacity onPress={ () => this.props.open() }>
<Image source={ require('#media/images/more.png') } style={ styles.more_button } />
</TouchableOpacity>
</LinearGradient>
)
}
}
const styles = StyleSheet.create({
header : {
height: 70,
backgroundColor: '#eee',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center'
},
title : {
color : '#fff',
textAlign: 'center',
fontSize: 20,
letterSpacing: 3
},
add_button : {
width: 30,
height: 30,
marginHorizontal: 10
},
more_button : {
width: 30,
height: 30,
marginHorizontal: 10
}
})
And here is my drawer.js
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import DrawerLayoutAndroid from 'DrawerLayoutAndroid';
import LinearGradient from 'react-native-linear-gradient';
export default class Drawer extends Component {
render () {
const NavigationMenu = (
<LinearGradient start={{x: 0, y: 0}} end={{x: 0, y: 1}} colors={['#a4d294', '#3ac6f3']} style={{ flex: 1 }}>
<View style={{ flex : 6, justifyContent: 'center' }}>
<Text>He There</Text>
</View>
</LinearGradient>
)
return (
<DrawerLayoutAndroid
drawerWidth={250}
drawerPosition={ DrawerLayoutAndroid.positions.Right }
renderNavigationView={ () => NavigationMenu }
ref={ (drawer) => this.props.ref = drawer }
>
{ this.props.children }
</DrawerLayoutAndroid>
)
}
}
I am going to answer your question by giving a simple example.
Lets take 2 components parent and child. You want to pass some message from parent to child and get a callback from child to parent when an event occurs in child.
export default class Parent extends React.Component<any, any> {
callback (paramFromChild) => {
// implement what to do when certain event occurs in child component
}
render () {
<View>
<Child message={"some text"} callbackFromChild={this.callback}/>
</View>
}
}
Child component
Interface childProps {
message: string
callbackFromChild(paramFromChild);
}
export default class Child extends React.Component<childProps, any> {
render () {
<View>
<Button title={this.props.message} onPress={this.props.callbackFromChild("some message from child")}/>
</View>
}
}
In this way you can communicate between different components using props.
I am new to react native and I want to navigate between screens. I have two sample files
#App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Home from './src/Home';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Home/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#FFEB3B',
alignItems: 'center',
justifyContent: 'center',
},
});
and another file
#Home.js
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity} from 'react-native';
export default class Home extends React.Component {
render() {
return (
<View style={styles.container}>
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>User</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Contractor</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
buttonText: {
fontSize:16,
fontWeight:'500',
color:'#212121',
textAlign:'center'
},
button: {
width:300,
borderRadius: 25,
backgroundColor:'#FCE4EC',
marginVertical: 10,
paddingVertical:16
}
});
How do I make it that when either User or Contractor are clicked in Home.js file they take me to different screens preferably using stacknavigator. I tried the documentation but can't seem to figure out the way forward.
You could do this easily using StackNavigator offered by react-navigation library.
Here is the idea:
In the App.js file you have to refer to the stacknavigator/parent of your navigation.
#App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { StackNavigator } from 'react-navigation';
import Home from './src/Home';
import Contractor from './src/Contractor';
import User from './src/User';
const Main = StackNavigator({
HomeScreen: {
screen: Home
},
UserScreen: {
screen: User,
},
ContractorScreen: {
screen: Contractor,
},
}
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Main/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#FFEB3B',
alignItems: 'center',
justifyContent: 'center',
},
});
Home file:
#Home.js
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity} from 'react-native';
export default class Home extends React.Component {
render() {
return (
<View style={styles.container}>
<TouchableOpacity style={styles.button}
onPress={() => this.props.navigation.navigate({ routeName: 'UserScreen'})}>
<Text style={styles.buttonText}>User</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button}
onPress={() => this.props.navigation.navigate({ routeName: 'ContractorScreen'})}>
<Text style={styles.buttonText}>Contractor</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
buttonText: {
fontSize:16,
fontWeight:'500',
color:'#212121',
textAlign:'center'
},
button: {
width:300,
borderRadius: 25,
backgroundColor:'#FCE4EC',
marginVertical: 10,
paddingVertical:16
}
});
User file:
#User.js
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity} from 'react-native';
export default class User extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.text}>I am the User screen</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
text: {
fontSize:16,
fontWeight:'500',
color:'#212121',
textAlign:'center'
});
And finally, Contractor file:
#Contractor.js
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity} from 'react-native';
export default class Contractor extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.text}>I am the Contractor screen</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
text: {
fontSize:16,
fontWeight:'500',
color:'#212121',
textAlign:'center'
});
I want to create some screen with stack and tabs navigator, but it seems not worked, it get error message like this error on virtual device...
Is this because the navigation or what?
This is my code
ConfirmActivation.js
import React, { Component } from 'react';
import { StyleSheet, Image } from 'react-native';
import { Container, Header, Content, Left, Right, Body, Text, StyleProvider,
Form, Item, Input, Label, Button, View } from 'native-base';
import { StackNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/FontAwesome';
import getTheme from '../../../native-base-theme/components';
import material from '../../../native-base-theme/variables/material';
import Index from '../tabs/Index';
export default class sharpcs extends React.Component {
static navigationOptions = {
title: <Image source={require('../../assets/img/sharp_logo.png')} style={{width: 200, height: 50}} />,
header: null
}
render() {
return (
<AppNavigation/>
);
}
}
class ConfirmActivation extends Component{
static navigationOptions = {
title: <Image source={require('../../assets/img/sharp_logo.png')} style={{width: 200, height: 50}} />,
header: null
}
render() {
const { navigate } = this.props.navigation;
return (
<StyleProvider style={getTheme(material)}>
<Container style={styles.container} >
<Form style={styles.form} >
<Item floatingLabel>
<Label>Masukkan kode verifikasi</Label>
<Input keyboardType = 'numeric' maxLength = {13} />
</Item>
<View style={styles.buttonContainer} >
<Button
onPress={() =>
navigate('MainScreen')
} success style={{width: 125}} >
<Label style={{color: '#FFF', marginLeft: 24}} >
Lanjut
</Label>
</Button>
</View>
</Form>
</Container>
</StyleProvider>
);
}
}
const App = StackNavigator({
ThisScreen: { screen: ConfirmActivation },
MainScreen: { screen: Index }
});
const AppNavigation = () => (
<App />
);
const styles = StyleSheet.create({
form: {
flex: 2,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
},
container: {
padding: 20
},
buttonContainer: {
marginTop: 20,
flexDirection: 'row',
alignSelf: 'flex-end'
}
});
Index.js
import React, { Component } from 'react';
export default class Index extends React.Component {
render() {
return null;
}
}
The cause of the error is the title in the navigationOptions in sharpcs class. It expects a string. You had provided it an image component. Although the image appears, but this error appears when navigating. So use instead of title, headerTitle
Whenever I click on Email in the first <TextInput/> box on my physical device, I can't see what's being typed. Only when I press Next to go to the Password box do I see what was typed in the Email box. Why's this so?
Here's App.js:
import React, {Component} from 'react';
import {View, StyleSheet} from 'react-native';
import BackGround from './components/BackGround';
export default class App extends Component {
render() {
return(
<View style={styles.back}>
<BackGround/>
</View>
);
}
}
const styles = StyleSheet.create({
back: {
flex: 1
}
});
Here's Login.js:
import React, {Component} from 'react';
import {StyleSheet, TextInput, View, Text, TouchableOpacity, KeyboardAvoidingView} from 'react-native';
class Login extends Component {
constructor(props) {
super(props);
this.state = {
text: ''
};
}
updateTextInput = text => this.setState({text});
render() {
return(
<KeyboardAvoidingView behavior={"padding"} style={styles.container}>
<View>
<TextInput
style={styles.input}
returnKeyType={"next"}
keyboardType={"email-address"}
autoCorrect={false}
onChangeText={this.updateTextInput}
value={this.state.text}
/>
<TextInput
style={styles.input}
returnKeyType={"go"}
secureTextEntry
/>
<TouchableOpacity>
<Text style={styles.loginAndCA}>Login</Text>
</TouchableOpacity>
<TouchableOpacity>
<Text style={styles.loginAndCA}>Create Account</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
container: {
padding: 20
},
input: {
backgroundColor: '#DAE5FF',
paddingBottom: 20,
padding: 20,
paddingHorizontal: 15,
marginBottom: 10,
borderRadius: 15,
},
loginAndCA: {
fontSize: 40,
textAlign: 'center',
color: 'white',
fontFamily: 'Bodoni 72 Smallcaps',
paddingHorizontal: 10
},
buttons: {
paddingBottom: 50
}
});
export default Login;
Here's BackGround.js:
import React, {Component} from 'react';
import {StyleSheet, Image, View} from 'react-native';
import Login from './Login';
export default class BackGround extends Component {
render() {
return(
<View style={styles.first}>
<Image style={styles.container} source={require('../pictures/smoke.jpg')}>
<View style={styles.second}>
<Login/>
</View>
</Image>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
width: null,
height: null,
backgroundColor: 'rgba(0,0,0,0)',
resizeMode: 'cover'
},
first: {
flex: 1
},
second: {
paddingTop: 290 // Moves both <TextInput> boxes down.
}
});
You need to pass value and onTextChange props to TextInput.
https://facebook.github.io/react-native/docs/textinput.html
You need to give it a value connected to state and as that textinput changes, you update the state value:
export default class TextInputExample extends Component {
constructor(props) {
super(props);
this.state = {
text: ''
};
}
updateTextInput = text => this.setState({ text })
render() {
return (
<View style={{ flex: 1}}>
<TextInput
style={{height: 40}}
placeholder="Type here!"
onChangeText={this.updateTextInput}
value={this.state.text}
/>
</View>
);
}
}