Develop Reference

React Native not go to button play

I have a problem when I press the btn of the remote control on the right side to go to the details of the movies, this button is not marked, but when I remove the text it does go directly to the play button.
Sorry for my basic english!!
With Text IMAGEN
without Text IMAGEN
This is my code
<View style={style.container}>
{dataFake.map((item, index) => {
return <View style={{ marginTop: 20, marginLeft: 20, width: 120, position: 'relative' }} key={index}>
<View onPress={() => console.log(1)}>
<Text>
Some text
</Text>
</View>
<View pointerEvents="none">
<ImageBackground source={{ uri: item.image }}
resizeMode={'contain'} style={{
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
borderBottomEndRadius: 10,
borderBottomStartRadius: 10,
overflow: 'hidden',
}}>
<View style={{ width: '100%', backgroundColor: 'black', height: 180, opacity: 0.5 }}></View>
</ImageBackground>
</View>
<TouchableHighlight onPress={() => console.log(item.id)} underlayColor={'#00B9AE'} style={{ width: '100%', color: 'white', marginTop: 10 }} >
<View style={style.btnView}>
<Text style={style.playBtn}>Play</Text>
</View>
</TouchableHighlight>
</View>
})}
</View >

is there way to put text "cancel" and "ok" below the avatar buttons ? i mean that the avatar and the text need to be pressable when click

is there a way to put the text "cancel" and "ok" below the avatar button? I mean that the avatar and the text need to be pressable when click.
I can't put the text below to every button and I don't understand what is my mistake.
this is what I get now
but I need the text below to every button and also must be also pressable same the image (it should be part of the button)
this is my example of code :
const OrderInformationScreen = props => {
return (
<View
style={{
backgroundColor: '#00BFFF',
alignItems: 'flex-start',
justifyContent: 'center',
marginTop: 30,
borderBottomWidth: 2,
borderColor: 'blue',
flexDirection: "row",
justifyContent: 'space-evenly'
}}
>
<Avatar
size='large'
containerStyle={{ marginTop: 30 }}
activeOpacity={0.2}
rounded
source={require('../assets/down.png')} style={{ height: 80, width: 80 }}
onPress={() => console.log("cancel!")}
/>
<View >
<Text style={{ fontSize: 30 }}>cancel</Text>
</View>
<Avatar
size='large'
activeOpacity={0.2}
rounded
source={require('../assets/up.png')} style={{ height: 80, width: 80 }}
onPress={() => console.log("Works!")}
/>
<View>
<Text style={{ fontSize: 30 }}>ok</Text>
</View>
</View>
);
};

I think the best option is wrapping the avatar and the text by TouchableOpacity.
<TouchableOpacity onPress={() => console.log("cancel!")}>
<Avatar
size='large'
containerStyle={{ marginTop: 30 }}
activeOpacity={0.2}
rounded
source={require('../assets/down.png')} style={{ height: 80, width: 80 }}
/>
<View >
<Text style={{ fontSize: 30 }}>cancel</Text>
</View>
</TouchableOpacity>
I recommend to write your own styles by using basic react native elements. Try to use least number of 3rd party plugins. Good luck.

It is like that because of the styles you have given to view. You have given a flex direction row which will place all your elements in a row. You have given four elements in your root view which has style flex-direction row so all four elements in that view (2 Avatar component and 2 text) will be placed side by side in a row.
if you want text below image i thin you should put avatar and text box in a view and give that a view a flex-direction column like:
<View style={{flexDirection: 'row', justifyContent: 'space-evenly'}}>
<TouchableOpacity onPress={() => console.log("cancel!")>
<View style={{flexDirection: 'column', justifyContent: 'space-evenly'}}>
<Avatar>
<View>
<Text />
</View>
<View>
</TouchableOpacity>
<TouchableOpacity onPress={() => console.log("works!")>
<View style={{flexDirection: 'column', justifyContent: 'space-evenly'}}>
<Avatar>
<View>
<Text />
</View>
<View>
</TouchableOpacity>
<View>
hope this helps in someway :)

The best option is Wrapping the avatar and text with TouchableOpacity. and Add some more Styles like below
<TouchableOpacity style={{
backgroundColor: '#00BFFF',
display : "flex",
alignItems: 'flex-start',
justifyContent: 'center',
marginTop: 30,
borderBottomWidth: 2,
borderColor: 'blue',
}} onPress={() => {}>
<Avatar
size='large'
containerStyle={{ marginTop: 30 }}
activeOpacity={0.2}
rounded
source={require('../assets/down.png')} style={{ height: 80, width: 80 }}
/>
<View >
<Text style={{ fontSize: 30 }}>cancel || ok</Text>
</View>
</TouchableOpacity>

How to have two centered and clickable image link in react-native

I want to have the two images clickable next to each over, this is my view:
function MyView(props) {
return (
<View style={{ flex: 1, }}>
<View style={{
// width: 230,
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<ExternalLink href="https://play.google.com/store/apps/details">
<Image
source={availableAtGooglePlayImage}
style={{
width: '100%',
height: 70,
flex: 1,
marginTop: 10,
resizeMode: 'contain',
}}
/>
</ExternalLink>
</View>
<View style={{
// width: 230,
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<ExternalLink href="https://itunes.apple.com/fr/app">
<Image
resizeMode="stretch"
source={availableAtAppStoreImage}
style={{
width: '100%',
height: 70,
flex: 1,
marginTop: 10,
resizeMode: 'contain',
}}
/>
</ExternalLink>
</View>
);
}
As soon as I use flex: 1 on the parent view of ExternalLink, the image disappear.
I have not found a way to get those two images next to each over.
I have only find a way to have them on top of each over, and the whole width is clickable but I want only the image to be clickable.
How this is possible in react-native ?

Can you check this code please, this is a working example expo :
import * as React from 'react';
import { Text, View, StyleSheet ,Image,TouchableOpacity,Linking } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View>
<TouchableOpacity onPress={() =>Linking.openURL("https://play.google.com/store/apps/details")}>
<Image style={{height:50,width:50}} source={{uri:"https://source.unsplash.com/random"}} />
</TouchableOpacity>
</View>
<View>
<TouchableOpacity onPress={() =>Linking.openURL("https://itunes.apple.com/fr/app")}>
<Image style={{height:50,width:50}} source={{uri:"https://source.unsplash.com/random"}} />
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection:'row',
justifyContent:'space-around',
alignItems:'center',
},
});
Feel free for doubts

What you are looking for is {flexDirection: 'row'} property in style.
Copy code to https://snack.expo.io/
import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity, Image, Linking } from 'react-native';
export default class App extends React.Component {
render() {
return (
<>
<View style={{flex:1, flexDirection:'row'}}>
<TouchableOpacity
style={styles.imageButton}
onPress={() =>{Linking.openURL("https://play.google.com/store/apps/details")}}
>
<Image
resizeMode={'contain'}
style={styles.coverImage}
source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
/>
</TouchableOpacity>
<TouchableOpacity
style={styles.imageButton}
onPress={() =>{Linking.openURL("https://itunes.apple.com/fr/app")}}
>
<Image
resizeMode={'contain'}
style={styles.coverImage}
source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
/>
</TouchableOpacity>
</View>
</>
);
}
}
const styles = StyleSheet.create({
coverImage: {
flex: 1,
alignSelf: 'stretch',
width: undefined,
height: undefined
},
imageButton:{
flex:1,
height:70
}
});

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())
}
}

How to open a react native modal on button click in react native?

I am new to react native and I am trying to open a modal on button click.
I am trying to use the following code to open the modal:-
openHeaderModal = () => {
<ModalDropdown
options={["H1", "H2", "H3"]}
dropdownStyle={{
borderRadius: 6,
backgroundColor: "#26344a",
shadowColor: "rgba(0, 0, 0, 0.2)",
shadowOffset: {
width: 0,
height: 5
},
shadowRadius: 20,
shadowOpacity: 1,
padding: 8
}}
dropdownTextStyle={{
fontFamily: "poppins-500",
fontSize: 16,
fontStyle: "normal",
letterSpacing: 0,
textAlign: "left",
color: "#ffffff",
backgroundColor: "#26344a"
}}
>
</ModalDropdown>
}
I am using react-native-modal-dropdown for modal.
Following is my jsx code for the buton:-
<Button onPress={() => this.openHeaderModal()} vertical>
<Image
style={{ marginTop: 20 }}
source={require("../assets/heading.png")}
/>
</Button>
Any help and support is appreciated. Thank you.

I think open a Modal in react-native very easy, simple example:
import React, {Component} from 'react';
import {Modal, Text, TouchableHighlight, View} from 'react-native';
class ModalExample extends Component {
state = {
modalVisible: false,
};
setModalVisible(visible) {
this.setState({modalVisible: visible});
}
render() {
return (
<View style={{marginTop: 22}}>
<Modal
animationType="slide"
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => {
alert('Modal has been closed.');
}}>
<View style={{marginTop: 22}}>
<View>
<Text>Hello World!</Text>
<TouchableHighlight
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
}}>
<Text>Hide Modal</Text>
</TouchableHighlight>
</View>
</View>
</Modal>
<TouchableHighlight
onPress={() => {
this.setModalVisible(true);
}}>
<Text>Show Modal</Text>
</TouchableHighlight>
</View>
);
}
}
Link: https://facebook.github.io/react-native/docs/modal.html#docsNav
If you want to use library: https://github.com/react-native-community/react-native-modal

I followed the example given by #Issac at https://github.com/sohobloo/react-native-modal-dropdown/blob/master/example/index.js and solved the problem.
Following is the code to inflate the Modal drop down on a button click:-
<ModalDropdown
style={{ marginLeft: 50 }}
ref={el => this._dropdown_5 = el}
defaultValue=''
dropdownStyle={{
borderRadius: 6,
backgroundColor: "#26344a",
shadowColor: "rgba(0, 0, 0, 0.2)",
shadowOffset: {
width: 0,
height: 5
},
shadowRadius: 20,
shadowOpacity: 1,
padding: 8
}}
dropdownTextStyle={{
fontFamily: "poppins-500",
fontSize: 16,
fontStyle: "normal",
letterSpacing: 0,
textAlign: "left",
color: "#ffffff",
backgroundColor: "#26344a"
}}
options={['H1', `H2`, 'H3']}
onDropdownWillShow={this._dropdown_5_willShow.bind(this)}
/>
code for the onPress of the button:-
<Button onPress={this._dropdown_5_show.bind(this)} vertical >
<Image style={{ marginTop: 20 }} style={{}} source={require("../assets/heading.png")} />
</Button>

Please find below link for modal demo
https://reactnativecode.com/react-native-modal-ios-android/