I am using Webview component in React Native to render HTML content. The problem I am facing is that I cannot make the height variable so it can adapt to any content it has.
return (
<View style={{flex: 1}}>
<Header
containerStyle={{
backgroundColor: 'white',
borderBottomColor: '#dee0e2',
borderBottomWidth: 1
}}
centerComponent={{ text: 'Noticia', style: { color: 'black' } }}
leftComponent={
<TouchableHighlight onPress={() => navigate('homeScreen')}>
<Text style={{color: '#4289f4'}}>Atrás</Text>
</TouchableHighlight>
}
/>
<ScrollView style={{padding: 5}}>
<View style={{flexDirection: 'column'}}>
<Text style={{textAlign: 'center', fontSize: 17, fontWeight: 'bold'}}>{noticia[0].titulo}</Text>
<Image style={{width: '100%', height: 200, alignSelf: 'stretch', marginTop: 10}} source={{uri: noticia[0].imagen}} />
<View style={{height: 200, backgroundColor: 'red'}}>
<WebView
source={{html: noticia[0].articulo}}
scalesPageToFit={(Platform.OS === 'ios') ? false : true}
/>
</View>
</View>
</ScrollView>
</View>
);
If I don't give the <View>' that contents ' <Webview>' a height it does show me nothing. Tried already withflex: 1` but nothing changes.
In your parent view (root view directly under return()) style it as
height: '100%',
width: '100%'
It will adopt to any size screen.
Related
It isn't turning out how I want it to be
Figma Design and the
Coded in React Native
I want it to float and have a transparent background while being stuck to the bottom of the screen like I have shown in the Figma design.
const TicketDetails = () => {
return (
<View style={{backgroundColor:'#D0DEEA', flex:1, position: 'relative'}}>
<ScrollView style={styles.containerMain} showsVerticalScrollIndicator={false}>
<View style={styles.topNavigation}>
<Back/>
<Close/>
</View>
<View style={styles.headingContainer}>
<Text style={styles.heading}>Create New Ticket</Text>
</View>
<View style={styles.formContainer}>
<View style={{flexDirection:'row', justifyContent:'space-between'}}>
<Text style={styles.formHeading}>Enter Ticket Details</Text>
<Filter/>
</View>
<CustomDropdown data={serviceType} text={'Service Type'} placeholderText={'Select Service Type'}/>
<CustomInput2 heading={'Assign Dealer'} placeholder={''}/>
<CustomInput2 heading={'HMR'} placeholder={'Enter HMR Value'}/>
<CustomDropdown data={criticality} text={'Criticality'} placeholderText={'Select Criticality'}/>
<CustomDropdown text={'Customer Concerns'} placeholderText={'Select..'}/>
<CustomInput2 heading={'Expected Date'} placeholder={'31 Dec 2022'}/>
</View>
</ScrollView>
<View style={styles.nextButton}>
<Submit text='Next' style={{position:'absolute'}}/>
</View>
</View>
)
}
const styles = StyleSheet.create({
containerMain:{
marginTop:60,
backgroundColor:'#D0DEEA',
opacity:1,
position:'relative'
},
formContainer:{
flex:0.7,
backgroundColor: 'white',
borderRadius: 35,
marginTop:40,
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.4,
},
nextButton:{
flexDirection: 'column',
flexGrow: 1,
justifyContent: 'space-between',
},
topNavigation:{
marginLeft:13,
marginRight:13,
flexDirection: 'row',
justifyContent: 'space-between'
}
})
It's either there at the scroll end or does not appear to be floating.
example for you:
import React from 'react';
import { Image,View, ScrollView,
Text,TouchableOpacity } from 'react-
native';
const logo = {
uri:
'https://reactnative.dev/img/tiny_logo.png',
width: 64,
height: 64
};
const App = () => (
<View>
<ScrollView>
<Text style={{ fontSize: 96 }}>Scroll me
plz</Text>
<Image source={logo} />
<Image source={logo} />
<Image source={logo} />
<Image source={logo} />
<Image source={logo} />
<Image source={logo} />
<Image source={logo} />
<Image source={logo} />
<Image source={logo} />
<Image source={logo} />
<Text style={{ fontSize: 96 }}>Scrolling
down</Text><Image source={logo} />
<Text style={{ fontSize: 96 }}>What's the
best</Text>
<Text style={{ fontSize: 96 }}>Framework
around?</Text>
<Text style={{ fontSize: 80 }}>React
Native</Text>
</ScrollView>
<TouchableOpacity style={{
position: 'absolute',
width: '90%',
height: 50,
alignItems: 'center',
justifyContent: 'center',
bottom: 30,
left:15,
right:5,
backgroundColor:'#ff00ff',
borderRadius:20
}} >
<Text >text</Text>
</TouchableOpacity>
</View>
);
export default App;
This request is a basic CSS knowledge.
Add position: 'relative' to the styles of the area that should snap under.
Add position: 'absolute' to your button styles. And your wish will come true.
If that doesn't help please share your sample code.
// this card component
<View style={{position: 'relative'}}>
// this button component
<TouchableOpacity style={{position: 'absolute', bottom: 0}}>
<Text>Hello World</Text>
</TouchableOpacity>
</View>
const TicketDetails = () => {
return (
<View style={{backgroundColor:'#D0DEEA', flex:1, position: 'relative'}}>
<ScrollView style={styles.containerMain} showsVerticalScrollIndicator={false}>
<View style={styles.topNavigation}>
<Back/>
<Close/>
</View>
<View style={styles.headingContainer}>
<Text style={styles.heading}>Create New Ticket</Text>
</View>
<View style={styles.formContainer}>
<View style={{flexDirection:'row', justifyContent:'space-between'}}>
<Text style={styles.formHeading}>Enter Ticket Details</Text>
<Filter/>
</View>
<CustomDropdown data={serviceType} text={'Service Type'} placeholderText={'Select Service Type'}/>
<CustomInput2 heading={'Assign Dealer'} placeholder={''}/>
<CustomInput2 heading={'HMR'} placeholder={'Enter HMR Value'}/>
<CustomDropdown data={criticality} text={'Criticality'} placeholderText={'Select Criticality'}/>
<CustomDropdown text={'Customer Concerns'} placeholderText={'Select..'}/>
<CustomInput2 heading={'Expected Date'} placeholder={'31 Dec 2022'}/>
</View>
</ScrollView>
<TouchableOpacity style={{
position: 'absolute',
width: '90%',
height: 50,
alignItems: 'center',
justifyContent: 'center',
bottom: 30,
left:15,
right:5,
backgroundColor:'#ff00ff',
borderRadius:20
}} >
<Text >text</Text>
</TouchableOpacity>
</View>
)
}
hello I am new to react native I am facing an abnormal behavior on navigation which happens between two modal screens first modal screen as shown in the picture on navigate it goes into next screen works fine
here is second modal picture on navigate
problem comes when I press on div upload cnic picture front and back then screens getting merged both are different component , previous screen modal appear as you seen in photo I marked in the screen with two modal screens
here is my CNIC upload screen code
<TouchableWithoutFeedback
onPress={() => {
displayModal(!modalVisible);
}}>
<View style={styles.container}>
<Modal
onBackdropPress={() => setModalVisible(false)}
onSwipeComplete={() => setModalVisible(false)}
swipeDirection={['down']}
useNativeDriverForBackdrop
style={{margin: 0}}
isVisible={modalVisible}>
<View
style={{
flex: 1,
borderTopLeftRadius: 25,
borderTopRightRadius: 25,
marginTop:
steper === 'step' ? deviceHeight * 0.1 : deviceHeight * 0.2,
backgroundColor: 'white',
alignItems: 'center',
}}>
<View
style={{
width: '100%',
height: '100%',
// alignItems: 'center',
marginTop: 3,
justifyContent: 'space-evenly',
}}>
<View style={{width: '100%', alignItems: 'center'}}>
<PopupBorder />
</View>
{/* first half */}
<View
style={{
width: '100%',
alignItems: 'center',
height: '18%',
justifyContent: 'flex-end',
}}>
<View style={styles.subContainer}>
<Image
style={{width: '40%', height: '50%', resizeMode: 'contain'}}
source={require('../assests/finger-print.png')}
/>
<Text style={{fontSize: 18}}>Verify your account </Text>
<SubTitle
amount
color="#636363"
title="We require CNIC and Selfie for the verification"
/>
</View>
</View>
{/* steper */}
<View
style={{
height: '10%',
justifyContent: 'center',
}}>
<DocumentSteper step={steper} />
</View>
{/* steper */}
{/* second half */}
<View
style={{
width: '100%',
height: '70%',
alignItems: 'center',
justifyContent: 'center',
}}>
<View style={styles.subContainer}>
<TouchableOpacity
style={{
width: '100%',
height: '80%',
alignItems: 'center',
}}>
{steper === 'step' ? (
<>
<TouchableOpacity
activeOpacity={0.6}
onPress={takeFrontPhotoFromCamera}
style={styles.imageContainer}>
<ImageBackground
style={styles.uploadStyle}
// resizeMode="contain"
source={
frontImage === null ? null : {uri: frontImage}
}>
<Image source={require('../assests/upload.png')} />
<View style={{paddingTop: 5}}>
<SubTitle
title="CNIC FRONT"
font
color="#06B2BC"
fontSize={14}
amount
/>
</View>
</ImageBackground>
</TouchableOpacity>
<TouchableOpacity
activeOpacity={1}
onPress={takeBackFrontPhotoFromCamera}
style={styles.imageContainer}>
<ImageBackground
style={styles.uploadStyle}
// resizeMode="contain"
source={
backImage === null ? null : {uri: backImage}
}>
<Image source={require('../assests/upload.png')} />
<View style={{paddingTop: 5}}>
<SubTitle
title="CNIC FRONT"
font
color="#06B2BC"
fontSize={14}
amount
/>
</View>
</ImageBackground>
</TouchableOpacity>
</>
) : (
<TouchableOpacity
onPress={takeSelfie}
style={styles.singleimageContainer}>
<ImageBackground
style={styles.uploadStyle}
// resizeMode="contain"
source={selfie === null ? null : {uri: selfie}}>
<Image source={require('../assests/upload.png')} />
<View style={{paddingTop: 5}}>
<SubTitle
title="CNIC FRONT"
font
color="#06B2BC"
fontSize={14}
amount
/>
</View>
</ImageBackground>
</TouchableOpacity>
)}
</TouchableOpacity>
<View
style={{
width: '100%',
height: '20%',
justifyContent: 'flex-end',
}}>
<Button
click={verify}
title={
steper === 'step' ? ' Verify CNIC' : 'Verify SELFIE'
}
backgroundColor="white"
marginBottom={15}
color="#06B2BC"
/>
</View>
</View>
</View>
</View>
</View>
</Modal>
<TouchableWithoutFeedback onPress={() => !modalVisible}>
<TouchableOpacity style={styles.map}>
<Image source={require('../assests/map.png')} />
</TouchableOpacity>
</TouchableWithoutFeedback>
</View>
</TouchableWithoutFeedback>
We can't see from your code sample where you are calling the second step "upload cnic picture". It seems that you are calling another modal on top of the first one.
If you have planned to have a full process within this modal, it is probably best to integrate a proper navigator rather than "navigate" between modals.
I am trying to create a TouchableOpacity after a FlatList in react native. Although it's coming under the view but there is a huge gap between the list and the button.
Following is the corresponding code :
<FlatList keyExtractor={(payment) => payment.iconFont} style={{ alignSelf: "center" }} data={payments} renderItem={({ item }) => {
return <View style={{ width: '100%', marginTop: 32 }}>
<View style={{ flexDirection: "row" }}>
<View>
<FontAwesome5 name={item.iconFont} size={32} />
</View>
<View>
<Text style={{ fontSize: 18, marginLeft: 16 }}>{item.mainText}</Text>
<Text style={{ fontSize: 12, marginLeft: 12 }}>{item.SubText}</Text>
</View>
</View>
</View>
}} />
<TouchableOpacity style={styles.button}>
<Text style={{ color: "#FFF", fontWeight: "500", fontSize: 20 }}>PAY</Text>
</TouchableOpacity>
I am doing something wrong over here ?
P.S. => Although FlatList is working fine
the corresponding styles :
button: {
backgroundColor: "#000000",
height: 40,
alignItems: "center",
justifyContent: "center",
borderRadius: 20
}
Move the Touchable Opacity into Flatlist's listfootercomponent prop. Like this:
<FlatList
ListFooterComponent={<TouchableOpacity> .... </TouchableOpacity>}
/>
This should solve the spacing problem. And place the TouchableOpacity component always at the bottom of the FlatList.
I would like my button (the blue block across the screen) to be much smaller and in the bottom right corner of the screen. How do I do this with styling in react-native?
Here is my button at the moment:
App.js
render() {
return (
<View>
<View style={{flexDirection:'row', alignItems:'center'}}>
<Text>Plan Name: </Text>
<TextInput style={{height: 40, borderColor: 'black', width: 120, borderWidth: 0.8}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}/>
</View>
<MyDatePicker/>
<Button style={{ width: 50, alignSelf: "flex-end" }}
title="Add Plan"
onPress={() =>
this.props.navigation.navigate('PlanScreen')}>
</Button>
</View>
)
}
}
Do you want it to be right of the button that is hidden if so you can give it a flexDirection of row and give flex to each wrapper so that it adjust itself
something like this.
<View style={{flexDirection: 'row', flex: 1}}>
<View style={{flex: 0.8}}><Button></Button></View>
<View style={{ flex: 0.2}}><Button></Button></View>
</View>
If you want it to be on separate line below the button that is hidden you can do
<View>
<Button style={{ width: 50, alignSelf: "flex-end" }}></Button>
</View>
and you can adjust the width accordingly.
You can update your render function as
render() {
return (
<View style={{flex: 1}}>
<View style={{flexDirection:'row', alignItems:'center'}}>
<Text>Plan Name: </Text>
<TextInput style={{height: 40, borderColor: 'black', width: 120, borderWidth: 0.8}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}/>
</View>
<MyDatePicker/>
<View style={{ width: 50, alignSelf: "flex-end">
<Button
title="Add Plan"
onPress={() =>
this.props.navigation.navigate('PlanScreen')}>
</Button>
</View>
</View>
)
}
}
render() {
return (
<View style={{ flex: 1}}>
{/*for header*/}
<View style = {{flexDirection:'row',justifyContent:'space-between',alignItems: 'center',width:'100%',height:'10%',backgroundColor: '#BE6507',padding:10}}>
<TouchableWithoutFeedback onPress={() =>this.props.navigation.goBack()}>
<Image style={{width: 25, height: 25}} source={require('../assets/back.png')} />
</TouchableWithoutFeedback>
<View/>
<View/>
{/*main content*/}
<ScrollView style={{padding:20,paddingTop:25 }}>
<View style={{alignItems:'center',marginBottom:20, width:Dimensions.get('window').width * 90 / 100}}>
<Image style={{height:"30%",width:"90%",marginBottom:10}} source={require("../assets/logo.png")}/>
<Text style={{fontSize: 21, color: "black",margin:6,marginBottom:25}}>ADD CARD DETAILS</Text>
<TextInput
value={this.state.nameoncard}
onChangeText={(nameoncard) => this.setState({ nameoncard:nameoncard })}
placeholder={'Name On Card'}
placeholderTextColor={'black'}
style={styles.input}
/>
<TextInput
value={this.state.card_num}
onChangeText={(card_num) => this.setState({ card_num:card_num})}
placeholder={'Card Number'}
placeholderTextColor={'black'}
style={styles.input}
/>
<TouchableOpacity style={{width:'90%',margin:10,backgroundColor:'black',padding:10,borderRadius:5,borderWidth:1,marginTop:20,marginBottom:20,height:45}}>
<Text style={{fontSize: 19,fontWeight: 'bold', color: "white", textAlign:'center'}}>Proceed to Pay</Text>
</TouchableOpacity>
</View>
</ScrollView>
);
In above code firstly i made a header for navigation.I want content below header to be scrollview.But above code does not seems to work and after half side of screen in vertical direction i does not see any views? What i am doing wrong here? How can i make scrollview to work correctly in above code?
You can try scrollEnabled with this.
First of all in your return of render() method you can have just one child. So, wrap the View and the ScrollView in a single View. You've also typos in the first section, look at how you're closing those Views: <View/> instead of </View>.
The correct code should be:
return (
<View style={{ flex: 1 }}>
{/*for header*/}
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
width: '100%',
height: '10%',
backgroundColor: '#BE6507',
padding: 10,
}}>
<TouchableWithoutFeedback
onPress={() => this.props.navigation.goBack()}>
<Image
style={{ width: 25, height: 25 }}
source={require('../assets/back.png')}
/>
</TouchableWithoutFeedback>
</View>
{/*main content*/}
<ScrollView style={{ padding: 20, paddingTop: 25 }}>
<View
style={{
alignItems: 'center',
marginBottom: 20,
width: (Dimensions.get('window').width * 90) / 100,
}}>
<Image
style={{ height: '30%', width: '90%', marginBottom: 10 }}
source={require('../assets/logo.png')}
/>
<Text
style={{
fontSize: 21,
color: 'black',
margin: 6,
marginBottom: 25,
}}>
ADD CARD DETAILS
</Text>
<TextInput
value={this.state.nameoncard}
onChangeText={nameoncard =>
this.setState({ nameoncard: nameoncard })
}
placeholder={'Name On Card'}
placeholderTextColor={'black'}
style={styles.input}
/>
<TextInput
value={this.state.card_num}
onChangeText={card_num => this.setState({ card_num: card_num })}
placeholder={'Card Number'}
placeholderTextColor={'black'}
style={styles.input}
/>
<TouchableOpacity
style={{
width: '90%',
margin: 10,
backgroundColor: 'black',
padding: 10,
borderRadius: 5,
borderWidth: 1,
marginTop: 20,
marginBottom: 20,
height: 45,
}}>
<Text
style={{
fontSize: 19,
fontWeight: 'bold',
color: 'white',
textAlign: 'center',
}}>
Proceed to Pay
</Text>
</TouchableOpacity>
</View>
</ScrollView>
</View>
);