Develop Reference

Disable the touchable screen's child view's touchablity

I want to disable the touchability of the View below. So I don't want console.log to run when the yellow square is pressed. I used pointerEvents but it didn't work. How can I do that?
import { Text, TouchableOpacity, View, } from "react-native"
import React from "react"
export default function Screen() {
return (
<TouchableOpacity
style={{ flex: 1, backgroundColor: "black" }}
onPress={() => console.log("pressed")}
>
<View
style={{ width: 100, height: 100, backgroundColor: "yellow" }}
pointerEvents="none"
>
<Text>React Native</Text>
</View>
</TouchableOpacity>
)
}

<TouchableOpacity
style={{ flex: 1, backgroundColor: "black" }}
onPress={() => console.log("pressed")} >
<TouchableOpacity activeOpacity={1}>
<View
style={{ width: 100, height: 100, backgroundColor: "yellow" }}>
<Text>React Native</Text>
</View>
</TouchableOpacity>
</TouchableOpacity>

drop down menu hiding behind content

I have a screen that looks like this:
return (
<SafeAreaView>
<View style={styles.container}>
<View style={styles.topContainer}>
<View style={styles.searchFieldContainer}>
<FavoritePointInput
textChangeHandler={textChangeHandler}
/>
</View>
<View style={styles.dropdown}>
<LocationsFound
addressesFound={locations.favAddressesFoundList}
/>
</View>
<View style={styles.fieldDescription}>
<Text>Set Location's Name:</Text>
</View>
<View style={styles.searchFieldContainer}>
<Item style={styles.searchField}>
<Input
placeholder="Library"
onChangeText={(text) => setLocationName(text)}
style={styles.searchText}
/>
</Item>
</View>
<View style={styles.buttonContainer}>
<Button style={styles.button}>
<Text>Save Location</Text>
</Button>
</View>
</View>
</View>
</SafeAreaView>
);
Its Stlyes are as like this:
export const styles = StyleSheet.create({
container: {
height: '100%',
width: '100%',
},
topContainer: {
height: moderateScale(750),
},
topTextContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
marginVertical: moderateScale(15),
height: moderateScale(30),
paddingLeft: moderateScale(30),
paddingRight: moderateScale(30),
},
topMiddleContainer: {
alignItems: 'center',
},
topMiddleText: {
justifyContent: 'center',
paddingBottom: 40,
},
searchFieldContainer: {
alignItems: 'center',
height: moderateScale(120),
},
button: {
width: moderateScale(120),
borderRadius: moderateScale(20),
alignItems: 'center',
alignContent: 'center',
},
buttonContainer: {
flexDirection: 'row',
justifyContent: 'center',
},
searchField: {
width: moderateScale(300, 0.3),
height: verticalScale(40),
marginVertical: moderateScale(3),
borderRadius: verticalScale(10),
},
fieldDescription: {
alignItems: 'center',
},
dropdown:{
position: 'absolute',
top: 200,
}
});
When I write something in the first input field, I get search results through the LocationsFound component. However, the search results start to hide behind the second input field. I want it to simply overlap and come on top of the second field until one of them is selected. Is that possible?

Have you tried zIndex?
dropdown:{
position: 'absolute',
top: 200,
zIndex: 10,
backgroundColor: '#fff'
}

It works for me I gave negative zIndex to the View which was showing on my dropdown list.
<View>
<DropDownPicker ... />
</View>
<View style={{ zIndex : -5 }}>
<Button ... />
<Button ... />
</View>

The first thing you could try is to change the order of your DOM objects and be sure to add your result as last item:
return (
<SafeAreaView>
<View style={styles.container}>
<View style={styles.topContainer}>
<View style={styles.searchFieldContainer}>
<FavoritePointInput
textChangeHandler={textChangeHandler}
/>
</View>
<View style={styles.fieldDescription}>
<Text>Set Location's Name:</Text>
</View>
<View style={styles.searchFieldContainer}>
<Item style={styles.searchField}>
<Input
placeholder="Library"
onChangeText={(text) => setLocationName(text)}
style={styles.searchText}
/>
</Item>
</View>
<View style={styles.buttonContainer}>
<Button style={styles.button}>
<Text>Save Location</Text>
</Button>
</View>
<View style={styles.dropdown}>
<LocationsFound
addressesFound={locations.favAddressesFoundList}
/>
</View>
</View>
</View>
</SafeAreaView>
);
Another solution could be to add a z-index to your dropDown:
fieldDescription: {
alignItems: 'center',
},
dropdown:{
position: 'absolute',
top: 200,
zIndex: 1 // ... or more
}

I fixed this issue by adding dropDownDirection="TOP" props into dropdown component which render dropdown container upside.
<DropDownPicker
dropDownDirection="TOP"
...
/>

save captured image to custom - secret album in react-native

Within my react-native app, I need to take a picture and save it to new - custom album. Album should not be able to be accessed through photos over menu, thus I need to make album private, so captured photos can only be accessed through the app itself. I searched over web and I guess it's possible with react-native-fs or react-native-fetch-blob, but it seems it works only on Android. But it is not exactly what I need. Can you help me please with any documentation, example, code or anything ?
Here is my current Camera component that I already created, where user can take photos, save it to camera roll and access to photos in case s/she wants.
import React, { Component } from 'react';
import {CardItem, Content, Container, Body, Left, Icon, Header, Right, Footer, FooterTab, Button } from 'native-base';
import {
Platform,
StyleSheet,
Dimensions,
Text,
ListView,
View,
Alert,
TouchableOpacity,
Image,
CameraRoll,
ScrollView
} from 'react-native';
import {Actions} from 'react-native-router-flux';
import { RNCamera } from 'react-native-camera';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
const {width, height} = Dimensions.get("window"),
vw = width / 100
vh = height / 100
export default class Camera extends Component {
constructor(props)
{ super(props)
this.state = {
buffer: false,
bufferImage: '',
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => true
}),
galleryON: false,
selectedImgTmstmp: '',
cameraType: 'RNCamera.Constants.Type.back',
flashMode: false,
cameraSelf: true
}
}
renderRow(img) {
clr = this.state.selectedImgTmstmp===img.node.timestamp?'blue':'grey';
return(
<CardItem button horizontal={false} onPress={()=>this.setState({selectedImgTmstmp: img.node.timestamp})}
style={{flexDirection: 'column',borderWidth: 3,borderRadius: 4,padding: 0, marginBottom: 5,
borderColor: clr,height: height/4, width: '48%'}}>
<Image
style={{
width: '100%',
height: '100%',
}}
source={{ uri: img.node.image.uri }}
/>
</CardItem>
);
}
render() {
if(this.state.galleryON){
return(
<Container>
<Content style={{backgroundColor: '#d8d8d8',height: '100%',width: width}}>
<ListView contentContainerStyle={{justifyContent: 'space-around',flexDirection: 'row', flexWrap: 'wrap'}}
dataSource={this.state.dataSource}
enableEmptySections={true}
renderRow={(rowData)=>this.renderRow(rowData)}>
</ListView>
</Content>
<View style={{flexDirection: 'row',width: width, height: 40, backgroundColor: '#ff5a00', alignItems: 'center', justifyContent: 'center'}}>
<Left style={{flex: 1, margin: 5}}>
<Text onPress={()=>this.setState({galleryON: false, selectedImgTmstmp: ''})} style={{fontWeight: 'bold', fontSize: 15}}>Cancel</Text>
</Left>
<Body style={{flex: 2}}>
<Text>Select Image</Text>
</Body>
<Right style={{flex: 1, margin: 5}}>
<Text onPress={()=>this.state.selectedImgTmstmp===''?null:Actions.pop()} style={{fontWeight: 'bold', fontSize: 15}}>Proceed</Text>
</Right>
</View>
</Container>
);
}
return (
this.state.buffer===false?
<Container style={styles.container}>
<Header style={{backgroundColor: '#000000',borderBottomWidth: 1, borderColor: '#FFF'}}>
<Left>
<Button transparent onPress={()=>this.setState({flashMode: !this.state.flashMode})}>
<Icon style={{color: '#FFF'}} name={this.state.flashMode?'ios-flash-outline':'ios-flash'}/>
</Button>
</Left>
<Right>
<Button transparent onPress={()=>this.setState({cameraSelf: !this.state.cameraSelf})}>
<Icon style={{color: '#FFF'}} name='ios-reverse-camera-outline'/>
</Button>
</Right>
</Header>
<RNCamera
ref={ref => {
this.camera = ref;
}}
style = {styles.preview}
type={this.state.cameraSelf?RNCamera.Constants.Type.front:RNCamera.Constants.Type.back}
flashMode={this.state.flashMode?RNCamera.Constants.FlashMode.on:RNCamera.Constants.FlashMode.off}
permissionDialogTitle={'Permission to use camera'}
permissionDialogMessage={'We need your permission to use your camera phone'}
/>
<View style={{flexDirection: 'row', justifyContent: 'space-between', height: '10%', alignItems: 'center',backgroundColor: '#000000'}}>
<TouchableOpacity style={{ height: 40, margin: 5}} onPress={()=>Actions.pop()}>
<Text style={{color: '#FFFF', fontSize: 25}}>Cancel</Text>
</TouchableOpacity>
<TouchableOpacity style={{ height: 40, margin: 5}} onPress={this.takePicture.bind(this)}>
<Icon style={{color: '#FFF', fontSize: 40}} name='ios-radio-button-on'/>
</TouchableOpacity>
<TouchableOpacity style={{ height: 40, margin: 5}} onPress={()=>this.getGallery()}>
<Text style={{color: '#FFFF', fontSize: 25}}>Photos</Text>
</TouchableOpacity>
</View>
</Container>
:
<Container style={{width: width, height: height, alignItems: 'center'}}>
<View style={{width: width, height: height, flexDirection: 'column'}}>
<Image source={{uri: this.state.bufferImage}} style={{width: '100%', height: '90%'}}/>
<View style={{flexDirection: 'row', justifyContent: 'space-between', height: '10%', alignItems: 'center',backgroundColor: '#000000'}}>
<TouchableOpacity style={{ height: 40, margin: 5}} onPress={()=>this.setState({bufferImage: '', buffer: false})}>
<Text style={{color: '#FFFF', fontSize: 25}}>Cancel</Text>
</TouchableOpacity>
<TouchableOpacity style={{ height: 40, margin: 5}} onPress={()=>this.savePictureToRoll(this.state.bufferImage)}>
<Text style={{color: '#FFFF', fontSize: 25}}>Done</Text>
</TouchableOpacity>
</View>
</View>
</Container>
);
}
getDataSource(posts) {
return this.state.dataSource.cloneWithRows(posts);
}
getGallery(){
CameraRoll.getPhotos({
first: 100,
assetType: 'Photos'
})
.then(photos => {
this.setState({dataSource: this.getDataSource(photos.edges), galleryON: true},()=>console.log(this.state.dataSource))
})
}
takePicture = async function() {
if (this.camera) {
const options = { quality: 0.5, base64: true };
const data = await this.camera.takePictureAsync(options)
console.log("DATA: ",data);
console.log(data.uri);
this.setState({buffer: true,bufferImage: data.uri})
}
};
savePictureToRoll(uri){
console.log("DATA.URI: ",this.state.bufferImage);
CameraRoll.saveToCameraRoll(uri, 'photo');
this.setState({bufferImage: '', buffer: false},()=>Alert.alert("IMAGE SAVED"), Actions.pop())
}
}

React Native // Background Image with flex container over it?

I'm trying to add a background image to my app, and I know the traditional way of doing it with the following style:
animatedBackground: {
alignItems: 'center',
resizeMode: 'stretch',
width: null
},
But my app is a little more complex, and I need to have a flex container over the background to display my information correctly (like adding another image over the background image). Therefore, I can't seem to be able to properly do this. This is my code for the screen:
render() {
return (
<View style = {styles.container}>
<Image
source={require('../images/background.gif')}
style={styles.animatedBackground} />
<Image
source={require('../images/trophy.png')}
style={{width: 280, alignItems: 'center', height: 280}}
/>
<Text style={styles.welcome}>
BreakFree
</Text>
<View style = {{flexDirection: 'row'}}>
<Button onPress = { this.login } style ={styles.tapToStart}>
Login
</Button>
<Button onPress = { this.signupUser } style ={styles.tapToStart}>
Signup
</Button>
</View>
</View>
);
}
Where "container" is
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#58C2E9',
},

import React from 'react';
import {Dimensions, Image, ImageBackground, Text, TouchableOpacity, View} from 'react-native';
const {width, height} = Dimensions.get('window')
render() {
return (
<ImageBackground source={require('../path/background_image.png')} style={{
width: width,
height: height,
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
}}>
<Image source={require('../path/logo.png')} resizeMode={'contain'}/>
</ImageBackground>
);
}
you can try this way.
if any text or button put in View.

How can I put an icon inside a TextInput in React Native?

I am thinking of having something like this https://android-arsenal.com/details/1/3941 where you have icon that you press to show password as plaintext, not as dots. However, I was unable to find any custom component that would help me.
I don't want to put too much time on such a minor feature, so I'm asking without having attempted anything yet: Is there a custom component I've missed? If not, is there a simple way to add children to TextInput? Or should I just have TextInput and Touchable side by side?

You can use combination of View, Icon and TextInput like so:
<View style={styles.searchSection}>
<Icon style={styles.searchIcon} name="ios-search" size={20} color="#000"/>
<TextInput
style={styles.input}
placeholder="User Nickname"
onChangeText={(searchString) => {this.setState({searchString})}}
underlineColorAndroid="transparent"
/>
</View>
and use flex-direction for styling
searchSection: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
},
searchIcon: {
padding: 10,
},
input: {
flex: 1,
paddingTop: 10,
paddingRight: 10,
paddingBottom: 10,
paddingLeft: 0,
backgroundColor: '#fff',
color: '#424242',
},
Icons were taken from "react-native-vector-icons"

Basically you can’t put an icon inside of a textInput but you can fake it by wrapping it inside a view and setting up some simple styling rules.
Here's how it works:
put both Icon and TextInput inside a parent View
set flexDirection of the parent to ‘row’ which will align the
children next to each other
give TextInput flex 1 so it takes the full width of the parent View
give parent View a borderBottomWidth and push this border down with paddingBottom (this will make it appear like a regular textInput with a borderBottom)
(or you can add any other style depending on how you want it to look)
Code:
<View style={styles.passwordContainer}>
<TextInput
style={styles.inputStyle}
autoCorrect={false}
secureTextEntry
placeholder="Password"
value={this.state.password}
onChangeText={this.onPasswordEntry}
/>
<Icon
name='what_ever_icon_you_want'
color='#000'
size={14}
/>
</View>
Style:
passwordContainer: {
flexDirection: 'row',
borderBottomWidth: 1,
borderColor: '#000',
paddingBottom: 10,
},
inputStyle: {
flex: 1,
},
(Note: the icon is underneath the TextInput so it appears on the far right, if it was above TextInput it would appear on the left.)

This is working for me in ReactNative 0.60.4
View
<View style={styles.SectionStyle}>
<Image
source={require('../assets/images/ico-email.png')} //Change your icon image here
style={styles.ImageStyle}
/>
<TextInput
style={{ flex: 1 }}
placeholder="Enter Your Name Here"
underlineColorAndroid="transparent"
/>
</View>
Styles
SectionStyle: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
borderWidth: 0.5,
borderColor: '#000',
height: 40,
borderRadius: 5,
margin: 10,
},
ImageStyle: {
padding: 10,
margin: 5,
height: 25,
width: 25,
resizeMode: 'stretch',
alignItems: 'center',
}

In case is useful I share what I find a clean solution:
<View style={styles.inputContainer}>
<TextInput
style={styles.input}
onChangeText={(text) => onChange(text)}
value={value}
/>
<Icon style={styles.icon} name="your-icon" size={20} />
</View>
and then in your css
inputContainer: {
justifyContent: 'center',
},
input: {
height: 50,
},
icon: {
position: 'absolute',
right: 10,
}

import { TextInput } from 'react-native-paper';
<TextInput
label="Password"
secureTextEntry
right={<TextInput.Icon name="eye" />}
/>

You can use this module which is easy to use: https://github.com/halilb/react-native-textinput-effects

You can wrap your TextInput in View.
<View>
<TextInput/>
<Icon/>
<View>
and dynamically calculate width, if you want add an icon,
iconWidth = 0.05*viewWidth
textInputWidth = 0.95*viewWidth
otherwise textInputwWidth = viewWidth.
View and TextInput background color are both white. (Small hack)

//This is an example code to show Image Icon in TextInput//
import React, { Component } from 'react';
//import react in our code.
import { StyleSheet, View, TextInput, Image } from 'react-native';
//import all the components we are going to use.
export default class App extends Component<{}> {
render() {
return (
<View style={styles.container}>
<View style={styles.SectionStyle}>
<Image
//We are showing the Image from online
source={{uri:'http://aboutreact.com/wp-content/uploads/2018/08/user.png',}}
//You can also show the image from you project directory like below
//source={require('./Images/user.png')}
//Image Style
style={styles.ImageStyle}
/>
<TextInput
style={{ flex: 1 }}
placeholder="Enter Your Name Here"
underlineColorAndroid="transparent"
/>
</View>
<View style={styles.SectionStyle}>
<Image
//We are showing the Image from online
source={{uri:'http://aboutreact.com/wp-content/uploads/2018/08/phone.png',}}
//You can also show the image from you project directory like below
//source={require('./Images/phone.png')}
//Image Style
style={styles.ImageStyle}
/>
<TextInput
style={{ flex: 1 }}
placeholder="Enter Your Mobile No Here"
underlineColorAndroid="transparent"
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
margin: 10,
},
SectionStyle: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
borderWidth: 0.5,
borderColor: '#000',
height: 40,
borderRadius: 5,
margin: 10,
},
ImageStyle: {
padding: 10,
margin: 5,
height: 25,
width: 25,
resizeMode: 'stretch',
alignItems: 'center',
},
});
Expo

Anyone who's struggling on this
you can try to follow mine also
<View style={{flex:1}}>
<KeyboardAvoidingView enabled>
<View style={{flexDirection:'row',paddingBottom:5, borderColor:'#ccc',borderBottomWidth:1}}>
<TextInput
style={{flex:1}}
onChangeText={(UserEmail) => setUserEmail(userEmail)}
placeholder="Password"
placeholderTextColor="#ccc"
autoCapitalize="none"
keyboardType="default"
returnKeyType="next"
ref={passwordInputRef}
onSubmitEditing={Keyboard.dismiss}
blurOnSubmit={false}
/>
<FontAwesome5 name={"eye"} size={25} style={{alignSelf:'center'}}/>
</View>
</KeyboardAvoidingView>
</View>

Here you have an example I took from my own project, i have just removed what i thought we didnt need for the example.
import React, { Component } from 'react';
import {
Text,
TouchableOpacity,
View,
StyleSheet,
Dimensions,
Image
} from 'react-native';
class YourComponent extends Component {
constructor(props) {
super(props);
this._makeYourEffectHere = this._makeYourEffectHere.bind(this);
this.state = {
showPassword: false,
image: '../statics/showingPassImage.png'
}
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity style={styles.button} onPress={this._makeYourEffectHere}>
<Text>button</Text>
<Image style={styles.image} source={require(this.state.image)}></Image>
</TouchableOpacity>
<TextInput password={this.state.showPassword} style={styles.input} value="abc" />
</View>
);
}
_makeYourEffectHere() {
var png = this.state.showPassword ? '../statics/showingPassImage.png' : '../statics/hidingPassImage.png';
this.setState({showPassword: !this.state.showPassword, image: png});
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
justifyContent: 'center',
flexDirection: 'column',
alignItems: 'center',
},
button: {
width: Dimensions.get('window').width * 0.94,
height: 40,
backgroundColor: '#3b5998',
marginTop: Dimensions.get('window').width * 0.03,
justifyContent: 'center',
borderRadius: Dimensions.get('window').width * 0.012
},
image: {
width: 25,
height: 25,
position: 'absolute',
left: 7,
bottom: 7
},
input: {
width: Dimensions.get('window').width * 0.94,
height: 30
}
});
module.exports = YourComponent;
I hope It helps you.
Let me know if it was useful.

you can also do something more specific like that based on Anthony Artemiew's response:
<View style={globalStyles.searchSection}>
<TextInput
style={globalStyles.input}
placeholder="Rechercher"
onChangeText={(searchString) =>
{this.setState({searchString})}}
underlineColorAndroid="transparent"
/>
<Ionicons onPress={()=>console.log('Recherche en cours...')} style={globalStyles.searchIcon} name="ios-search" size={30} color="#1764A5"/>
</View>
Style:
searchSection: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
borderRadius:50,
marginLeft:35,
width:340,
height:40,
margin:25
},
searchIcon: {
padding: 10,
},
input: {
flex: 1,
paddingTop: 10,
paddingRight: 10,
paddingBottom: 10,
paddingLeft: 0,
marginLeft:10,
borderTopLeftRadius:50,
borderBottomLeftRadius:50,
backgroundColor: '#fff',
color: '#424242',
},

It's now more easier to use with nativebase input hope this will help someone. I used Iconscout and you can use any icon library.
<View style={styles.input}>
<Input leftElement={<UilReact size="30" color="#61DAFB" style={styles.icon}/>} style={styles.input} size={'2xl'} variant="underlined" placeholder="Round" />
</View>
const styles = StyleSheet.create({
input: {
justifyContent:'center'
},
icon: {
marginRight:10
}
});

You can test this too, dont forget to add the style below as well.
<View style={styles.searchContainerStyle}>
<Ionicons name="search" size={24} color="gray"/>
<View style={{ flex: 1 }}>
<TextInput
type="search"
placeholder="Search for doctors & labs"
style={{ marginLeft: Sizes.fixPadding}}
/>
</View>
</View>
searchContainerStyle: {
backgroundColor: "#F5F5F5",
borderRadius: 30.0,
height: 45.0,
flexDirection: "row",
alignItems: "center",
paddingLeft: Sizes.fixPadding + 5.0,
marginBottom: 10,
},

if you are Willing to ADD Your OWN Custome SVG to the Left of Right.
Follow this..
Import svgs from "your Svgs Location"
<TextInputRNP
label="lable"
placeholder="placeholder"
right={<TextInput.Icon icon={() => <svgs.Calender />} size={30} />}
left={<TextInput.Icon icon={() => <svgs.Calender2 />} size={30} />}
/>
Here TextInputRNP is the text Input from React-native-Paper