I wanna render a button in react native like this:
Hear is my code :
class Test extends Component {
render() {
return (
<View>
<TouchableHighlight style={{marginBottom:20,height:40,backgroundColor:'blue',justifyContent:'center'}}>
<Text style={{alignSelf:'center',color:'white'}}>Login</Text>
</TouchableHighlight>
</View>
);
}
}
But the render result for mentioned above is :
How to modify my code？
Use position: 'absolute' in this case, like:
loginButton: {
position:'absolute',
bottom: 0,
height:40,
backgroundColor:'blue',
justifyContent:'center',
width: width
}
and render should be:
render() {
return (
<View style={styles.loginButton}>
<TouchableHighlight>
<Text style={styles.loginButtonText}>Login</Text>
</TouchableHighlight>
</View>
);
}
Here is the full working code: https://rnplay.org/apps/6qMTdA
Related
I created a GoToButton as advised by React Navigation v5 to move from one child screen to another
function GoToButton({ screenName }) {
const navigation = useNavigation();
return (
<TouchableOpacity
title={`${screenName}`}
onPress={() => navigation.navigate(screenName)} style={styles.buttonLogin}>
<Text style={{color: '#ffcc00', fontWeight: 'bold'}}>Start!</Text>
</TouchableOpacity>
);
}
I wanted to move from the login screen which was imported inside of the function:
function LoginScreen({navigation}) {
return (
<View>
<Login />
<View style={{alignContent:'center' , alignItems:'center'}}>
<GoToButton screenName="TabNavigator" />
</View>
</View>
);
}
To the TabNavigatorScreen:
function TabNavigatorScreen({ navigation }) {
return (
<TabNavigator/>
);
}
When I place the reference to the GoToButton like this, the reference works:
function LoginScreen({navigation}) {
return (
<View>
<Login /> //imported earlier from the file Login.js
<View style={{alignContent:'center' , alignItems:'center'}}>
<GoToButton screenName="TabNavigator" /> //next to the imported Login
</View>
</View>
);
}
But my goal is to place the GoToButton inside of the Login.js as shown:
import GoToButton from '../navigation/SwitchNavigator' class Login extends React.Component {
login = () => {
this.props.login(this.props.email)
}
render() {
return (
<View style={{ position: 'absolute', justifyContent: 'center', alignItems: 'center', flex: 1, justifyContents: "flex-end", width: screenWidth, height: screenHeight, backgroundColor: 'white', }}>
<View style={styles.box}>
<TextInput value={this.props.user} style={styles.textarea} onChangeText={input => this.props.updateEmail(input)}
placeholder='Email'/>
<TextInput value={this.props.user} style={styles.textarea} onChangeText={input => this.props.updatePassword(input)}
placeholder='Password' />
<GoToButton screenName="TabNavigator" onPress={() => this.login()}/>
</View>
</View>
);
}
}
Unfortunately, this results in the error: ooks like you nested a 'Navigation Container' inside another. How do I solve this problem?
I have a custom header view and I have call this inside my class but for some reason it is not showing.
export default class App extends Component<Props> {
customHeader(){
<View style={{height:80, width:'100%', backgroundColor: 'blue'}}>
<TouchableOpacity>
<Text>Header</Text>
</TouchableOpacity>
</View>
}
render() {
return (
<View style={styles.container}>
//Calling my custom header
{this.customHeader()}
</View>
);
}
}
I feel like my code is correct but the header is not showing. Any idea why?
Your customHeader function must return something. Right now it just runs jsx and returns nothing. Fix it like this for example:
customHeader(){
return (
<View style={{height:80, width:'100%', backgroundColor: 'blue'}}>
<TouchableOpacity>
<Text>Header</Text>
</TouchableOpacity>
</View>
)
}
I'm trying to set a background image in react native.I want a background cover image. I've done like the below
<ScrollView>
<View>
<Image source={ require('../Images/5.jpg') } style = { styles.image } />
{
this.state.details.map(a =>
<View>
<Text style={ styles.textStyle } > { a.content = a.content.replace(regex, '') } < /Text>
< RadioForm style= {{ width: 350 - 30 }} outerColor = "#080103" innerColor = "#FF5733" itemShowKey = "label" itemRealKey = "item" dataSource = { transform(a.options) } onPress = {(item)=>this._onSelect(item)}/>
</View>)
}
</View>
</ScrollView>
const styles = StyleSheet.create({
image: {
flex: 1,
resizeMode: 'cover',
position: 'absolute',
width: "100%",
flexDirection: 'column'
},
textStyle: {
fontSize: 16,
color: '#000',
padding: 5,
},
});
But I'm getting something like this
You might need to add the ImageBackground outside of your ScrollView and make sure flex is being passed to the ImageBackground style'
For example
<View style={{flex: 1}}>
<ImageBackground
resizeMode={'stretch'} // or cover
style={{flex: 1}} // must be passed from the parent, the number may vary depending upon your screen size
source={require('/*Your Image Path*/')}
>
<ScrollView>
{/*Render the children here*/}
</ScrollView>
</ImageBackground>
</View>
What you need is ImageBackgroundcomponent.
import {ImageBackground} from 'react-native';
<ImageBackground
source={require('./pathToYourImage.png')}
style={yourCustomStyle}>
</ImageBackground>
That should do it.
import React from 'react';
import { View, Image, StyleSheet } from 'react-native';
import { WINDOW } from '../assets/config.js';
class Splash extends React.Component{
render(){
return(
<View style={styles.splashContainer}>
<Image
style={styles.bgImage}
source={require('../assets/images/splash.jpg')}
/>
</View>
)
}
}
const styles = StyleSheet.create({
splashContainer: {
flex: 1
},
bgImage: {
flex: 1,
width: WINDOW.width,
height: WINDOW.height,
}
});
export default Splash;
try like this. This worked fine for me.
Use
<ImageBackground
source={your image path}>
I'm trying to create IndicatorViewPager with three parts.
the problem that I can't see the content of each page. Below my code.
export default class Reservations extends Component {
render() {
return (
<View style={{flex:1}}>
<IndicatorViewPager
style={{flex:1, paddingTop:20, backgroundColor:'white'}}
indicator={this._renderTitleIndicator()}
>
<View style={{backgroundColor:'cadetblue'}}>
<Text>page one</Text>
</View>
<View style={{backgroundColor:'cornflowerblue'}}>
<Text>page two</Text>
</View>
<View style={{backgroundColor:'#1AA094'}}>
<Text>page three</Text>
</View>
</IndicatorViewPager>
</View>
);
}
_renderTitleIndicator() {
return <PagerTitleIndicator titles={['one', 'two', 'three']} />;
}
I have the title for each part but the content is hidden. Thank you for your help.
I am trying to create a two column grid using flex. One column will be used to display a word or phrase and the second column will be used to translate the first column. Here is a link: http://imgur.com/nZGo8pb to give you a visual idea on what I am trying to achieve.
I am unable to get two columns side by side. I am only able to have my words appear on top of each other. This is best attempt. A huge failure.http://imgur.com/a/ICApr
My code is:
nent} from 'react';
import { Text, View,StyleSheet,Image,TextInput,ListView} from 'react-native';
class AddWords extends Component{
state = {words:['iku','konkai','kaikan'],
word:'',
EnglishWords:['go','this time','next time']
}
renderList(tasks){
return(
tasks.map((task) =>{
return(
<View key={task} style={styles.item}>
<Text>
{task}
</Text>
<Text>
</Text>
</View>
)
})
)
}
renderEnglishWords(english){
return(
english.map((english) =>{
return(
<View key={english} style={styles.item2}>
<Text>
{english}
</Text>
<Text>
</Text>
</View>
)
})
)
}
addWord(){
let words = this.state.words.concat([this.state.word]);
this.setState({words})
}
render(){
return(
<View style={styles.container}>
<TextInput
style={styles.input}
onChangeText={(word) => {
this.setState({word})
}}
onEndEditing={()=>this.addWord()}
/>
<View style={styles.wordContainer}>
{this.renderList(this.state.words)}
{this.renderEnglishWords(this.state.EnglishWords)}
<View style={styles.item2}>
</View>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container:{
flex:1,
borderWidth:3,
borderColor:'green',
flexDirection:'column',
paddingTop:10
},
wordContainer:{
flexDirection: 'column',
borderColor:'blue',
borderWidth:2
},
input:{
height:60,
borderWidth:1,
borderRadius:5,
borderColor:'black',
textAlign:'center',
margin:10,
paddingTop:20,
paddingBottom:10
},
item:{
borderColor:'red',
borderWidth:2
},
item2:{
borderColor:'black',
borderWidth:2,
flexDirection:'column',
}
})
export default AddWords;
Any help will be greatly appreciated.
Thanks.
You need to wrap both inner containers in another <View> with the following style:
<View style={styles.container}>
<TextInput
style={styles.input}
onChangeText={(word) => {
this.setState({ word })
}}
onEndEditing={this.addWord}
/>
<View style={{ flexDirection: 'row', flex: 1 }}>
<View style={styles.wordContainer}>
...
</View>
<View style={styles.item2}>
...
</View>
</View>
</View>
It's because the flexDirection in styles.wordContainer is set to 'column', it should be set to 'row'.
Check out this link on flex-direction examples.