I started to learn react-native and I encountered a problem.
I need an image to repeat in the background but it's streched.
It seems the resizeMode is not working.
import React, { Component } from 'react';
import { Image, ImageBackground, StyleSheet, Button, View, Text } from 'react-native';
const styles = StyleSheet.create({
home: {
flex: 1,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'transparent',
},
backgroundImage: {
flex: 1,
resizeMode: 'repeat',
backgroundColor: '#882829'
}
});
export class HomeScreen extends Component {
render() {
return (
<View style={{flex: 1}}>
<ImageBackground source={require('../assets/stain_pattern.png')} style={styles.backgroundImage}>
<View style={styles.home}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('Details')}
/>
</View>
</ImageBackground>
</View>
);
}
}
You need to use imageStyle={{resizeMode: 'repeat'}}. Refer documentation link
You need apply repeat in image style
<ImageBackground
source={require('../assets/stain_pattern.png')}
style={styles.backgroundImage}
imageStyle={{ resizeMode: 'repeat' }}
>
<View style={styles.home}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('Details')}
/>
</View>
</ImageBackground>;
Related
I wanna add a "Verify" button inside my TextInput as shown in the picture. I tried adding a TouchableOpacity component but I think I'm doing it wrong. You guys have a solution?
Try this code it should work for you
<View style={{flexDirection:'row'}}>
<View>
<TextInput
style={{alignItems:'center',justifyContent:'center',backgroundColor:'white'}}
value = {this.state.emailId}
onChangeText = {(emailId) => {this.setState({emailId})}}
placeholder = 'Enter your email id'
onSubmitEditing = {()=>{this._fetchResults()}}
/>
</View>
<TouchableHighlight style={{alignItems:'center',justifyContent:'center'}} onPress = {()=>{this._fetchResults()}} underlayColor = 'transparent'>
<View>
<Text>Verify</Text>
</View>
</TouchableHighlight>
I couldnt get the styling down right but here's this will get you in the right direction
import * as React from 'react';
import {
Text,
View,
StyleSheet,
TextInput,
TouchableOpacity,
} from 'react-native';
import Constants from 'expo-constants';
export default function App() {
return (
<View style={styles.container}>
<View style={styles.firstBox}>
<View style={styles.row}>
<TextInput
placeholder="Email id"
placeholderTextColor="gray"
style={styles.input} />
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Verify</Text>
</TouchableOpacity>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingTop: Constants.statusBarHeight,
padding: 8,
backgroundColor: 'lightgreen',
},
buttonText:{
textDecorationLine:"underline"
},
input: {
flex: 2,
borderRadius:5
},
button: {
flex: 0.5,
alignItems: 'center',
},
firstBox: {
backgroundColor: 'green',
paddingBottom: 2,
top:-2,
borderRadius:5
},
row: {
flexDirection: 'row',
width: '100%',
backgroundColor: 'white',
padding:5,
borderRadius:5
},
});
I am building a login screen. i am totally fresh in it. I took google help to get my 3 buttons in a single row using grid view. This is my code:
import { StatusBar } from 'expo-status-bar';
import React, {useState,useEffect, Component} from "react";
import { StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';
export class GridView extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.buttonContainer}>
<Button title="Button 1"/>
</View>
<View style={styles.buttonContainer}>
<Button title="Button 2"/>
</View>
<View>
<TouchableOpacity>
<Text style={style.Email_btn}>
Email
</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
export default function App() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
return (
<View style={styles.container}>
<Text style={{color:'#ffffff', fontSize:28}}>LOG IN</Text>
<StatusBar style="auto" />
<View style={styles.inputView}>
<TextInput
style={styles.TextInput}
autoCapitalize="none"
placeholder="Email."
placeholderTextColor="#003f5c"
onChangeText={(email) => setEmail(email)}
/>
</View>
<View style={styles.inputView}>
<TextInput
style={styles.TextInput}
placeholder="Password."
placeholderTextColor="#003f5c"
secureTextEntry={true}
onChangeText={(password) => setPassword(password)}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
buttonContainer: {
flex: 1,
},
Email_btn:{
backgroundColor:"#1c313a",
width:30,
height:80,
},
container: {
flex: 2,
backgroundColor: '#455a64',
/*alignItems:'flex-start',
justifyContent: 'center'*/
},
inputView: {
backgroundColor: '#1c313a',
borderRadius: 30,
width: "70%",
height: 45,
marginBottom: 20,
alignItems: "center",
},
TextInput: {
height: 50,
flex: 1,
padding: 10,
marginLeft: 20,
}
});
The buttons in the grid view class should appear in the same row. below them there should be the email and password textinputs. I can't see the buttons on my screen neither my textinputs are getting the texts from users. Kindly help me!!
you added flexDirection:'row' to your app container View. that means everything you add inside it, will be displayed horizontal.
also you are not rendering <GridView Class component in App.
you need to cross check your styles which effects most of the layout.
here is the modified snippet for you.
import React, {useState, Component} from "react";
import { StatusBar, Button, StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';
export class GridView extends Component {
render() {
return (
<View style={styles.btnContainer}>
<View style={styles.button}>
<Button color={'white'} title="Button 1"/>
</View>
<View style={styles.button}>
<Button color={'white'} title="Button 2"/>
</View>
<View style={[styles.button, styles.emailBtnWrap]}>
<TouchableOpacity>
<Text style={styles.emailBtn}>
Email
</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
export default function App() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
return (
<View style={styles.containerWrap}>
<StatusBar />
<View style={styles.textCenter}>
<Text style={styles.textColor}>LOG IN</Text>
</View>
<View style={styles.formContainer}>
<View style={styles.inputView}>
<TextInput
autoCapitalize="none"
placeholder="Email."
placeholderTextColor="#003f5c"
onChangeText={(email) => setEmail(email)}
/>
</View>
<View style={styles.spacing12} />
<View style={styles.inputView}>
<TextInput
placeholder="Password."
placeholderTextColor="#003f5c"
secureTextEntry={true}
onChangeText={(password) => setPassword(password)}
/>
</View>
</View>
<GridView />
</View>
);
}
const styles = StyleSheet.create({
containerWrap: {
flex: 1,
},
textCenter: {
flex:1,
alignItems: 'center',
justifyContent: 'center'
},
textColor: {
color:'#000',
fontSize:28
},
formContainer: {
flex:1,
padding:12
},
inputView: {
backgroundColor: '#f9f9f9',
borderRadius: 30,
borderWidth:1,
borderColor: '#ccc',
paddingVertical:16,
paddingHorizontal:12
},
spacing12: {
marginVertical:12
},
btnContainer: {
flexDirection: 'row'
},
button: {
flex:1,
backgroundColor:'blue',
padding:12
},
emailBtnWrap: {
backgroundColor:'green'
},
emailBtn: {
color:'white'
},
btnColor: {
color:'white'
}
});
I'm new to React Native. I've added a modal to my app and I want it to be closed when I click outside the modal. But nothing happens when I click out of the modal.
Here is my code
import React from 'react';
import { View, Text, TouchableWithoutFeedback } from 'react-native';
import { Button } from 'react-native-elements';
import Modal from 'react-native-modal';
import { style } from './style';
const MenuTask = ({ isVisible, onDisapearCallBack }) => (
<TouchableWithoutFeedback onPress={() => onDisapearCallBack()}>
<Modal
isVisible={isVisible}
animationIn={'zoomInDown'}
animationOut={'zoomOutUp'}
animationInTiming={1000}
animationOutTiming={1000}
backdropTransitionInTiming={1000}
backdropTransitionOutTiming={1000}
>
<TouchableWithoutFeedback>
<View style={style.modal}>
<View style={style.textView}>
<Text style={style.modalTitle}>Que souhaitez vous faire sur la tâche ?</Text>
</View>
<View style={style.buttonView}>
<Button
buttonStyle={style.buttonDelete}
title = "Supprimer"
onPress={() => onDisapearCallBack()}
/>
<Button
buttonStyle={style.buttonChangeStatus}
title = "Changer status"
onPress={() => onDisapearCallBack()}
/>
</View>
</View>
</TouchableWithoutFeedback>
</Modal>
</TouchableWithoutFeedback>
);
export default MenuTask;
Please could you help me to figure this out. Thanks a lot :)
#ramashish tomar thanks for your help. I tried to apply what you said but still not working :(
Here is my code
import React from 'react';
import { View, Text, TouchableWithoutFeedback } from 'react-native';
import { Button } from 'react-native-elements';
import Modal from 'react-native-modal';
import { style } from './style';
const MenuTask = ({ isVisible, onDisapearCallBack }) => (
<View>
<Modal
isVisible={isVisible}
animationIn={'zoomInDown'}
animationOut={'zoomOutUp'}
animationInTiming={1000}
animationOutTiming={1000}
backdropTransitionInTiming={1000}
backdropTransitionOutTiming={1000}
>
<TouchableWithoutFeedback onPress={() => onDisapearCallBack()}>
<View style={style.modal}>
<TouchableWithoutFeedback>
<View>
<View style={style.textView}>
<Text style={style.modalTitle}>Que souhaitez vous faire sur la tâche ?</Text>
</View>
<View style={style.buttonView}>
<Button
buttonStyle={style.buttonDelete}
title = "Supprimer"
onPress={() => onDisapearCallBack()}
/>
<Button
buttonStyle={style.buttonChangeStatus}
title = "Changer status"
onPress={() => onDisapearCallBack()}
/>
</View>
</View>
</TouchableWithoutFeedback>
</View>
</TouchableWithoutFeedback>
</Modal>
</View>
);
export default MenuTask;
I can close the modal by clicking on it or on both buttons but not outside it. Really weird.
Here is the screenshot of the modal:
Modal screenshot
Maybe you could help me
Thanks in advance
You don't need TouchableWithoutFeedback outside the modal as by default modal covers the whole screen.
You can try something like this-
import React, { useState } from "react";
import {
View,
Text,
TouchableWithoutFeedback,
StyleSheet,
Button,
Modal,
TouchableOpacity
} from "react-native";
function MenuTask() {
const [isVisible, onDisapearCallBack] = useState(false);
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "orange"
}}
>
<Modal animationType="fade" transparent={true} visible={isVisible}>
<TouchableWithoutFeedback onPress={() => onDisapearCallBack(false)}>
<View style={{ flex: 1, backgroundColor: "rgba(0,0,0,0.7)" }}>
<TouchableWithoutFeedback>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "white",
marginVertical: 150,
marginHorizontal: 10
}}
>
<Text>Modal Content</Text>
</View>
</TouchableWithoutFeedback>
</View>
</TouchableWithoutFeedback>
</Modal>
<Text style={{ color: "white", fontSize: 30 }}>Its page content</Text>
<TouchableOpacity
onPress={() => onDisapearCallBack(true)}
style={{
backgroundColor: "red",
borderRadius: 10,
paddingHorizontal: 30,
paddingVertical: 10,
marginTop: 20
}}
>
<Text style={{ color: "white", fontSize: 18 }}>Open Modal</Text>
</TouchableOpacity>
</View>
);
}
export default MenuTask;
I use react-native-swiper and i want to add a text above my image.
I try to set style container image paragraph, it is still not working.
What should i do about the style setting ?
Any help would be appreciated. Thanks in advance.
import React, { Component } from 'react';
import { View, Text, Image, Dimensions } from 'react-native';
import Swiper from 'react-native-swiper';
const dimensions = Dimensions.get('window').width;
class About extends Component {
render() {
return (
<View style={{ flex: 1 }}>
<Swiper
style={styles.wrapper}
height={200}
paginationStyle={{bottom: 10}}
>
<View style={styles.container}>
<Image style={styles.image} source={require('../img/home_service_bg1.jpg')} />
<Text style={styles.paragraph}>How to let me show above the img.</Text>
</View>
<View style={{ flex: 1 }}>
<Image source={require('../img/home_service_bg2.jpg')} style={styles.img}/>
</View>
</Swiper>
<View style={{ flex: 2 }}>
<Text>Hi</Text>
</View>
</View>
);
}
}
const styles = {
wrapper: {
},
container: {
flex: 1,
alignItems: 'stretch',
justifyContent: 'center',
},
image: {
flexGrow:1,
height:null,
width:null,
alignItems: 'center',
justifyContent:'center',
},
paragraph: {
textAlign: 'center',
},
};
export default About;
Here is my situation now:
I hope it becomes like this:
position="absolute" will make it work as Android RelativeLayout.
If you want set view on top set marginTop to 0.
After seeing your requirement. You can simply use ImageBackground
<ImageBackground source={...} style={{width: '100%', height: '100%'}}>
<Text>Inside</Text>
</ImageBackground>
See facebook docs
I need to create two or more buttons which will be of equal width and horizontally aligned, based on screen width button width may vary.
You can wrap you Buttons into flexed Views :
import React, { Component } from 'react';
import { Button, View, StyleSheet } from 'react-native';
export default const FlexedButtons () => (
<View style={styles.container}>
<View style={styles.buttonContainer}>
<Button title="Button 1"/>
</View>
<View style={styles.buttonContainer}>
<Button title="Button 2"/>
</View>
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
buttonContainer: {
flex: 1,
}
});
Here is a working example on Sketch:
https://snack.expo.io/SyMpPSise
import React, { Component } from 'react';
import { Button, StyleSheet, View } from 'react-native';
export default class ButtonExample extends Component {
_onPressButton() {
alert('You tapped the button!')
}
render() {
return (
<View style={styles.container}>
<View style={styles.buttonContainer}>
<Button
onPress={this._onPressButton}
title="Press Me"
/>
</View>
<View style={styles.buttonContainer}>
<Button
onPress={this._onPressButton}
title="Press Me"
color="#841584"
/>
</View>
<View style={styles.alternativeLayoutButtonContainer}>
<Button
onPress={this._onPressButton}
title="This looks great!"
/>
<Button
onPress={this._onPressButton}
title="OK!"
color="#841584"
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
buttonContainer: {
margin: 20
},
alternativeLayoutButtonContainer: {
margin: 20,
flexDirection: 'row',
justifyContent: 'space-between'
}
});
<View style={styles.menuContainer}>
<TouchableOpacity onPress={() => this.pressLink('Home')}>
<View style={styles.imageTextContainer}>
<Image
source={require('./on.png')} />
<Text style={{flex:1 ,color: '#fff',fontSize: 20,marginLeft: 20}} >Home</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.pressLink('About')}>
<View style={styles.imageTextContainer}>
<Image
source={require('./on.png')} />
<Text style={{flex:1 ,color: '#fff',fontSize: 20,marginLeft: 20}} >About</Text>
</View>
</TouchableOpacity>
</View>
const styles = StyleSheet.create({
menuContainer: {
flex: 0.52,
marginLeft: 5
},
imageTextContainer: {
marginLeft: 20,
padding: 10,
flexDirection: 'row',
justifyContent: 'space-between'
}
});