I try to add a Button to my TextInput and added it using position: absolute like this:
<View style={{width: '100%'}}>
<View
style={{
position: 'absolute',
alignItems: 'center',
justifyContent: 'space-between',
height: '100%',
width: '100%',
flexDirection: 'row',
}}>
<Icon
name="search-outline"
type="ionicon"
size={30}
style={{marginLeft: 8}}
/>
{value != '' && (
<Icon
name="close-outline"
type="ionicon"
size={30}
style={{marginRight: 8}}
onPress={() => this.setState({value: ''})}
/>
)}
</View>
<MyTextInput
placeholder="search"
value={value}
onChange={val => this.setState({value: val.nativeEvent.text})}
inputStyle={{paddingLeft: 46}}
/>
</View>
But whenever I click a Button, the TextInput focusses and I onPress is not getting executed
Render the View after MyTextInput
<View style={{width: '100%'}}>
<MyTextInput
placeholder="search"
value={value}
onChange={val => this.setState({value: val.nativeEvent.text})}
inputStyle={{paddingLeft: 46}}
/>
<View
style={{
position: 'absolute',
alignItems: 'center',
justifyContent: 'space-between',
height: '100%',
width: '100%',
flexDirection: 'row',
}}>
<Icon
name="search-outline"
type="ionicon"
size={30}
style={{marginLeft: 8}}
/>
{value != '' && (
<Icon
name="close-outline"
type="ionicon"
size={30}
style={{marginRight: 8}}
onPress={() => this.setState({value: ''})}
/>
)}
</View>
</View>
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>
)
}
My app have structure like this,
MapPage.js that contain expo-barcode-scanner wrapped with Modal and MapView.
DetailsPage.js that contain search result/products' details.
User can use the barcode scanner or TextInput(also in MapPage, not wrapped in Modal) to search product ID and the app will navigate to DetailsPage for result. If result is not found, app will automatically navigate.goBack() to MapPage. If result existed, will goto the result and stay in DetailsPage.
User can also navigate to DetailsPage by pressing marker callout on MapView.
Here is situation:
user press on marker callout(navigate to DetailsPage), then press back(navigate.goBack()) to MapPage : No lagging
user search by TextInput, then back to MapPage: No lagging whether search result exist or not
user search by Barcode, result not exist, automatically back to MapPage: not lagging
user search by Barcode, result existed, stay in DetailsPage, user manually press back: LAGGING
Below codes for your references
//MapPage
<MapView
style={{ width: '100%', height: '100%' }}
provider={PROVIDER_GOOGLE}
showsMyLocationButton={true}
showsUserLocation={true}
region={{
latitude: region.latitude,
longitude: region.longitude,
latitudeDelta: region.latitudeDelta,
longitudeDelta: region.longitudeDelta,
}}>
<MapMarker
markerLocation={markers}
countryCode={country.countryCode}
/>
</MapView>
...
<TextInput
placeholder={
i18n.t('SearchId')
}
placeholderTextColor="white"
onSubmitEditing={() =>
handleBarCodeScanned({ data: textSearchData })
}
onChangeText={(text) => {
settextSearchData(text.toUpperCase());
}}
/>
<Pressable onPress={() => setqrcodeModalVisi(true)}>
<Ionicons
name="qr-code-outline"
size={33}
color="white"
/>
</Pressable>
...
<Modal
visible={qrcodeModalVisi}
animationType="slide"
onRequestClose={() => setqrcodeModalVisi(false)}
transparent={true}>
<View>
<Pressable onPress={() => setqrcodeModalVisi(false)}>
<Feather
name="x"
size={24}
color="white"
/>
</Pressable>
{!hasPermission && (
<View>
<Text
style={{
color: colors.text,
}}>
Camera access denied.
</Text>
<Pressable onPress={() => getBarCodeScannerPermissions()}>
<Text style={{ color: colors.secondary }}>
Goto setting page
</Text>
</Pressable>
</View>
)}
{hasPermission && (
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<BarCodeScanner
onBarCodeScanned={
scanned ? undefined : handleBarCodeScanned
}
style={{
width: '100%',
height: '80%',
}}
/>
</View>
)}
</View>
</Modal>
//MapMarker
<View>
{markerLocation.map((array) => (
<Marker
key={array.title}
coordinate={{
latitude: array.latitude,
longitude: array.longitude,
}}
image={require('../../../assets/icons/map_marker.png')}
title={''}
description={''}
onCalloutPress={() => handleMapMarkerPress(array.regionCode)}>
<Callout>
<View
style={{
backgroundColor: 'white',
width: 180,
paddingVertical: 5,
alignItems: 'center',
justifyContent: 'center',
}}>
<Text
style={{
width: '80%',
textAlign: 'center',
color: colors.secondary,
fontWeight: 'bold',
}}>
{array.title}
</Text>
<View
style={{
backgroundColor: colors.secondary,
width: '80%',
height: 25,
alignItems: 'center',
justifyContent: 'center',
marginTop: 2,
flexDirection: 'row',
marginVertical: 5,
}}>
<Text style={{ color: 'white', fontWeight: 'bold' }}>
{i18n.t('MapMarkerBtn')}
</Text>
</View>
</View>
</Callout>
</Marker>
))}
</View>
Thanks!
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 have been trying to display image by passing parameter via props as shown here in my relevant codes:
function ListItem(props) {
return (
<TouchableHighlight
onPress={() => (props.onPress ? props.onPress() : null)}>
<ViewDefine widthOffset={-60}>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
}}>
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<Image
source={require('../../images/manageport.png')}
//source={require(props.iconPath)}
resizeMode={'contain'}
style={{
width: 32,
height: 32,
}}
/>
<Text style={[fontNormal2, {marginLeft: 10}]}>{props.text}</Text>
</View>
<View>
<IconComponent
iconName={'arrow-right'}
iconSize={20}
iconColor={'gray'}
/>
</View>
</View>
</ViewDefine>
</TouchableHighlight>
);
}
Another function that passes props to above code:
<ListItem
onPress={() => navigate('ManagePort')}
iconPath={'../../images/manageport.png'}
//iconName={'briefcase'}
//iconColor={'violet'}
text={'จัดการผลงาน'}
/>
Result is
[fatal][tid:main] src/screen/Profile.js: src/screen/Profile.js:Invalid call at line 57: require(props.iconPath)
Please help out.
Have you try this
<ListItem
onPress={() => navigate('ManagePort')}
iconPath={require('../../images/manageport.png')}
//iconName={'briefcase'}
//iconColor={'violet'}
text={'จัดการผลงาน'}
/>
<Image
// source={require('../../images/manageport.png')}
source={props.iconPath}
resizeMode={'contain'}
style={{
width: 32,
height: 32,
}}
/>
I have the following return() and am unable to move the last VIEW which contains the button title = 'done' to the right side
return (
<View style={styles.container}>
<Text style={styles.bigFont}>{`${this.state.timer + 'TIMER'}`}</Text>
<Text style={styles.bigFont}>{`${this.state.min + ':' + this.state.sec}`}</Text>
<View style={styles.button}>
<Button title= {this.state.startFlag ? 'PAUSE' : 'START'} onPress={()=>this.startToggle()} />
<Button title='RESET' onPress={()=>this.resetToggle()} />
</View>
<View style={styles.row}>
<Text style={[styles.bold,{marginRight:10},{width:112},
{textAlign:'right'}]}>
Work Timer:</Text>
<Text style={styles.bold}> min:</Text>
<TextInput
value={Math.floor(this.state.workTime / 60).toString()}
style={styles.input}
onChangeText={(text)=>{this.captureInput(text)}}
onSubmitEditing={()=>{(this.update('work-min'))}}
/>
<Text style={styles.bold}> sec:</Text>
<TextInput
value={Math.floor(this.state.workTime % 60).toString()}
style={styles.input}
keyboardType='numeric'
onChangeText={(text) => {this.captureInput(text)}}
onSubmitEditing={()=>{(this.update('work-sec'))}}
/>
</View>
<View style={styles.row}>
<Text style={[styles.bold,{marginRight:10},{width:112},
{textAlign:'right'}]}>
Break Timer:</Text>
<Text style={styles.bold}> min:</Text>
<TextInput
value={Math.floor(this.state.breakTime / 60).toString()}
style={styles.input}
keyboardType='numeric'
onChangeText={(text) => {this.captureInput(text)}}
onSubmitEditing={()=>{(this.update('break-min'))}}
/>
<Text style={styles.bold}> sec:</Text>
<TextInput
value={Math.floor(this.state.breakTime % 60).toString()}
style={styles.input}
keyboardType='numeric'
onChangeText={(text) => {this.captureInput(text)}}
onSubmitEditing={()=>{(this.update('break-sec'))}}
/>
</View>
<View style={{flexDirection:'row',justifyContent:'flex-end',alignItems:'flex-end'}} >
<Text ><Button title='done' onPress={()=>this.resetToggle()} /></Text>
</View>
</View>
)
export default StyleSheet.create({
container: {
flex:1,
flexDirection:'column',
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
marginBottom:150,
},
bigFont:{
fontSize:40,
color:'darkblue'
},
row:{
flexDirection:'row',
marginBottom:15,
},
button:{
flexDirection:'row',
marginTop:30,
marginBottom:30,
},
bold: {
fontWeight: 'bold',
color:'green',
},
input: {
borderWidth: 1,
borderColor: 'black',
marginRight: 10,
paddingHorizontal:15,
minWidth: 50,
},
})
so, interestingly, we need to use alignSelf:'flex-end' or use width:'100%'. flex:1 is definitely wrong as that uses all the available space and shifts everything up.
Below code should work. Last section of return statement.
<View style={{flex: 1, flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'flex-end'}} >
<Text ><Button title='done' onPress={() => this.resetToggle()} /></Text>