React native Custom button not clickable only on iOS - ios

I have the following component which the onPress method works perfectly on Android but not in iOS:
export default class Tag extends React.PureComponent {
static propTypes = {
title: PropTypes.string,
accessibilityLabel: PropTypes.string,
width: PropTypes.string,
onPress: PropTypes.func,
borderColor: PropTypes.string,
backgroundColor: PropTypes.string,
color: PropTypes.string
};
static defaultProps = {
marginTop: 0,
secureTextEntry: false,
autoCapitalize: 'none',
backgroundColor: "white",
color: "black",
marginLeft: 0
}
render() {
const { onPress } = this.props;
return (
<TouchableHighlight onPress={onPress}style={[styles.tag, { backgroundColor: this.props.backgroundColor, marginLeft: this.props.marginLeft}]}>
<Text style={{color: this.props.color, fontWeight:"bold", fontSize:15}}>{this.props.value}</Text>
</TouchableHighlight>
);
}
}
const styles = StyleSheet.create({
tag: {
padding: 5,
color: 'white',
borderRadius: 5,
marginTop: 5,
},
});
I use it like that:
<Tag onPress={() => console.log("TEST TEST")} marginLeft={0} value={"EDIT"}/>
But nothing is printed in the console. What is missing ?

Related

React Native app style not rendering on xcode simulator but working on Android Studio?

So I have a basic react native chat application that runs on both android studio and Xcode ios simulator. I am using expo. But the Xcode ios simulator is not rendering some styles as you can see. The android emulator is showing proper alignment for all the text and border radius for each message box. What is the issue?
function ChatMessage(props) {
const { to,message,from,time } = props.message;
const messageClass = from === 'Ram' ? 'sent' : 'received';
const timeStamp = () =>{
return(
<View>
<Text style={{fontSize:12,color:'black',alignSelf:'flex-end'}}>{time}</Text>
</View>
)
}
return (
<>
{/* <View className ={`message ${messageClass}`}> */}
<View style={[styles.messageContainer, messageClass === 'sent' ? styles.sent : styles.received ]}>
<Text style={[styles.message, messageClass === 'sent' ? styles.sentMessage : styles.receivedMessage ]}>
{messageClass === 'received' && <NameStamp from={from}/>}//PROBLEM HERE. CODE OF NAMESTAMP BELOW
{messageClass === 'received' && "\n"}
<Text style={{fontSize:20}}>
{message}
</Text>
{"\n"}
{timeStamp()} //PROBLEM HERE CODE OF TIMESTAMP ABOVE
{/*invoke timeStamp function */}
</Text>
</View>
</>
)
}
//THIS COMPONENT IS ~Ghanshayam IN THE SCREEN. NOT ALIGNING //PROPERLY
const NameStamp = (props) =>{
return(
<View>
<Text style={{color:'grey',fontSize:12,alignSelf:'flex-end'}}>
~{props.from}
</Text>
</View>
)
}
const styles = StyleSheet.create({
container: {
backgroundColor:'#d4e4f7',
flex:1,
},
header:{
backgroundColor:'#236ab9',
flexDirection:'row',
justifyContent: 'center',
alignItems: 'center',
alignContent: 'center',
flex:1,
},
main:{
backgroundColor:'#d4e4f7',
padding:10,
flex:5,
},
form:{
backgroundColor:'#236ab9',
flex:1,
flexDirection:'row'
},
input:{
flex:4,
color:'white',
padding:5,
fontSize:22,
},
text:{
// margin:'0 auto',
color:'white',
fontSize:20,
},
message:{
lineHeight:24,
padding:15,
marginBottom:12,
borderRadius:25,
overflow:'hidden', //THIS FIXED THE BORDER RADIUS
position:'relative',
color:'white',
textAlign:'left'
},
messageContainer:{
flexDirection:'row',
alignItems:'center',
},
sent:{
flexDirection:'row-reverse'
},
sentMessage:{
color:'white',
backgroundColor:'#0b93f6',
alignSelf:'flex-end'
},
receivedMessage:{
backgroundColor:'white',
color:'black'
}
});

here is the updated code as for your need i have included snack link so you check that its working in both ios, android platforms
snack demo link
code:
function ChatMessage(props) {
const { to, message, from, time } = props.message;
const messageClass = from === 'Ram' ? 'sent' : 'received';
const timeStamp = () => {
return (
<View>
<Text
style={{
fontSize: 12,
color: messageClass === 'sent' ? 'white' : 'black',
alignSelf: 'flex-end',
}}>
{time}
</Text>
</View>
);
};
return (
<View
style={[
styles.messageContainer,
messageClass === 'sent' ? styles.sent : styles.received,
]}>
{messageClass === 'received' && <NameStamp from={from} />}
<Text
style={[
styles.message,
messageClass === 'sent' ? styles.sentMessage : styles.receivedMessage,
]}>
<Text style={{ fontSize: 20 }}>{message}</Text>
</Text>
{timeStamp()}
</View>
);
}
const NameStamp = (props) => {
return (
<View>
<Text style={{ color: 'grey', fontSize: 12, alignSelf: 'flex-end' }}>
~{props.from}
</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: '#d4e4f7',
flex: 1,
paddingTop: 70,
},
header: {
backgroundColor: '#236ab9',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
alignContent: 'center',
flex: 1,
},
main: {
backgroundColor: '#d4e4f7',
padding: 10,
flex: 5,
},
form: {
backgroundColor: '#236ab9',
flex: 1,
flexDirection: 'row',
},
input: {
flex: 4,
color: 'white',
padding: 5,
fontSize: 22,
},
text: {
color: 'white',
fontSize: 20,
},
message: {
lineHeight: 24,
color: 'white',
textAlign: 'left',
},
received: {
backgroundColor: 'white',
alignSelf: 'flex-start',
},
messageContainer: {
alignItems: 'flex-start',
padding: 15,
marginBottom: 12,
borderRadius: 25,
overflow: 'hidden',
minWidth: 160,
maxWidth: 220, // define min, max width
},
sent: {
alignSelf: 'flex-end',
backgroundColor: '#0b93f6',
},
sentMessage: {
color: 'white',
},
receivedMessage: {
color: 'black',
},
});

Position React Native alert at bottom of screen

React Native alert defaults to showing up at the center of the screen. I've been trying to style it so that it shows up at the bottom of the screen - with no success. Does anyone know how I would go about this? I tried position: absolute and bottom: 0 but it still shows up in the center.

I have tried this out let me know if it helps also have designed according to the image.
Copy Paste the code and try.
import React, { useState } from 'react';
import {
StyleSheet,
View,
Text,
TextInput,
Pressable,
Modal,
Dimensions,
Button,
} from 'react-native';
const App = () => {
const [showWarning, SetshowWarning] = useState(false);
const onPressHandler = () => {
SetshowWarning(true);
}
return (
<View style={styles.body}>
<Modal
visible={showWarning}
transparent
onRequestClose={() =>
SetshowWarning(false)
}
animationType='slide'
hardwareAccelerated
>
<View style={styles.centered_view}>
<View style={styles.warning_modal}>
<View style={styles.warning_title}>
<Text style={{
color: '#000000',
fontSize: 25,
fontWeight:'700',
textAlign: 'center',
}}>Unsaved Changes</Text>
<Text style={styles.text}>Are you sure you want to continue?</Text>
</View>
<Pressable
onPress={() => SetshowWarning(false)}
style={styles.warning_button1}
android_ripple={{ color: '#fff' }}
>
<Text style={styles.textKE}>Keep Editing</Text>
</Pressable>
<Pressable
onPress={() => SetshowWarning(false)}
style={styles.warning_button}
android_ripple={{ color: '#fff' }}
>
<Text style={styles.textDC}>Discard Changes</Text>
</Pressable>
</View>
</View>
</Modal>
<Button onPress={() =>onPressHandler()} title="Text This"></Button>
{/* Add Here full code */}
</View >
);
};
const styles = StyleSheet.create({
body: {
flex: 1,
backgroundColor: '#ffffff',
alignItems: 'center',
},
centered_view: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#00000099',
},
warning_modal: {
width: Dimensions.get('window').width,
height: 200,
backgroundColor: '#eeff0f0',
borderRadius: 20,
top:"31%"
},
warning_title: {
height: 100,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#eff0f0',
borderTopRightRadius: 20,
borderTopLeftRadius: 20,
borderBottomWidth:1,
borderColor:'grey'
},
warning_body: {
height: 100,
justifyContent: 'center',
alignItems: 'center',
},
textKE: {
marginTop:20,
color: '#1485fe',
fontSize: 20,
margin: 5,
textAlign: 'center',
},
textDC: {
marginTop:20,
color: 'red',
fontSize: 20,
margin: 5,
textAlign: 'center',
},
warning_button1: {
height:70,
backgroundColor: '#efeff0',
borderBottomWidth:1,
borderColor:'grey'
},
warning_button: {
height:70,
backgroundColor: '#efeff0',
borderBottomLeftRadius: 20,
borderBottomRightRadius: 20,
}
});
export default App;

React-Native ENOENT: no such file or directory, open'assets-library://asset/asset.jpg' in Xcode

Hi while uploading the picture from iPhone using react-native-fs in my react-native app. I am getting below error.
How to fix this above issue.

I fixed the above issue by adding this captureTarget={Camera.constants.CaptureTarget.disk} line of code in my file.
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
import Camera from 'react-native-camera';
import RNFS from 'react-native-fs';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.titlebar}>
<Text style={styles.title}>Welcome {this.props.navigation.getParam('FirstName', '')}</Text>
</View>
<Camera
ref={(cam) => {
this.camera = cam;
}}
type={'front'}
style={styles.preview}
aspect={Camera.constants.Aspect.fill}
captureQuality={Camera.constants.CaptureQuality.low}
captureTarget={Camera.constants.CaptureTarget.disk}
>
<View>
<View style={styles.buttoncontainer}>
{
this.props.navigation.getParam('LogType', '') &&
<Text style={styles.in} onPress={this.takePicture.bind(this)}>IN</Text>
}
{!this.props.navigation.getParam('LogType', '') &&
<Text style={styles.out} onPress={this.takePicture.bind(this)}>OUT</Text>
}
</View>
</View>
</Camera>
</View>
);
}
takePicture() {
this.camera.capture()
.then((data) =>
this.ServiceCall(data)
)
.catch(err => console.error(err));
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white'
},
title: {
flex: 1,
alignSelf: 'center',
fontSize: 30,
color: 'black',
backgroundColor: 'white'
},
titlebar: {
flexDirection: 'row',
backgroundColor: 'white',
paddingTop: 10,
paddingBottom: 10,
paddingLeft: 5
},
buttoncontainer: {
flexDirection: 'row',
},
preview: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center'
},
in: {
fontSize: 30,
backgroundColor: 'green',
marginBottom: 20,
padding: 20,
color: 'white',
borderRadius: 10,
textAlign: 'center'
},
out: {
fontSize: 30,
padding: 20,
backgroundColor: 'red',
marginBottom: 20,
color: 'white',
borderRadius: 10,
textAlign: 'center'
},
});
strong text

React-Native NavigatorIOS bug not working with background image

It appears that the NavigatorIOS is not displaying the current content when there is a full screen background image as a sibling to it.
Can you please let me know if there is a workaround, I don't want to move the background image into each and every of my component pages.
Here the example code:
https://rnplay.org/apps/wrntpQ
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
Image,
NavigatorIOS
} = React;
var SampleComponent = React.createClass({
render: function() {
return (
<View style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'transparent'
}}>
<Text style={{color: 'red'}}>Hello</Text>
</View>
);
}
});
AppRegistry.registerComponent('SampleComponent', () => SampleComponent);
var SampleApp = React.createClass({
render: function() {
return (
<View style={styles.container}>
<View style={styles.bgContainer}>
<Image
style={styles.logo}
source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}/>
</View>
<NavigatorIOS
style={styles.navigator}
initialRoute={{
component: SampleComponent,
title: 'My View Title'
}} />
</View>
);
}
});
/*
// It works if you put the following line in line 39
<SampleComponent style={styles.navigator} />
// But it doesn't work when you put the following lines in 39
<NavigatorIOS
style={styles.navigator}
initialRoute={{
component: SampleComponent,
title: 'My View Title'
}} />
*/
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
bgContainer: {
position: 'absolute',
left: 0,
top: 0,
right: 0,
bottom: 0
},
logo: {
flex: 1,
// remove width and height to override fixed static size
width: null,
height: null,
// make the background transparent so you actually see the image
backgroundColor: 'transparent'
},
navigator: {
flex: 1,
backgroundColor: 'transparent'
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);
module.exports = SampleApp;

I was told that this isn't currently supported.
They strongly suggest that you use Navigator instead of NavigatorIOS (see the comparison docs here and then you won't have this issue.
NavigatorIOS is not actively being worked on -- it is a "Community Responsibility" because it is essentially unused by Facebook and by other core contributors, and the community hasn't been particularly interested in pushing it forward either (very few pull requests), so it would be unsafe to build your app around this.

React Native showing blank screen

I'm using react-native latest release 0.4.4 and installed react-native-side-menu and react-native-carousel components.
For some reason when I run the app, it's not showing anything.
The code instantiate a view with sidemenu and contentview inside.
contentview is for displaying the main page which contains three buttons and when someone clicks on explore it takes them to search page using navigatorios component.
Is there is some problem with StyleSheet ?
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
Component,
NavigatorIOS,
View,
TouchableHighlight,
TextInput,
} = React;
var SideMenu = require('react-native-side-menu');
var Menu = React.createClass({
about: function() {
this.props.menuActions.close();
},
render: function() {
return (
<View>
<Text>Menu</Text>
<Text onPress={this.about}>About</Text>
</View>
);
}
});
var styles = StyleSheet.create({
searchView: {
flexDirection: 'row',
padding: 25,
marginTop: 100,
},
text: {
color: 'black',
backgroundColor: 'white',
fontSize: 30,
margin: 80
},
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#F5FCFF',
},
flowRight: {
flexDirection: 'column',
padding: 25,
alignItems: 'center',
alignSelf: 'stretch',
marginTop: 100,
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
button: {
height: 36,
flex: 1,
flexDirection: 'row',
backgroundColor: '#009D6E',
borderColor: '#008C5D',
borderWidth: 1,
borderRadius: 8,
marginBottom: 10,
alignSelf: 'stretch',
justifyContent: 'center'
},
buttonText: {
fontSize: 18,
color: 'white',
alignSelf: 'center'
},
});
class Search extends Component {
render() {
return (
<View style={styles.searchView}>
<TextInput
style={{ flex: 2, height: 40, borderColor: 'gray', borderWidth: 1, padding: 5, borderRadius: 5}}
onChangeText={(text) => this.setState({input: text})}
placeholder="Search Appointment" />
<TextInput
style={{ flex: 1, height: 40, borderColor: 'gray', borderWidth: 1, padding: 5, borderRadius: 5}}
onChangeText={(text) => this.setState({input: text})}
placeholder="Location" />
</View>
);
}
}
class Welcome extends React.Component {
onExplorePressed() {
this.props.navigator.push({
title: 'Explore',
component: Search,
});
}
render() {
return (
<View style={styles.flowRight}>
<Text style={styles.welcome}>
Welcome to Docit!
</Text>
<TouchableHighlight style={styles.button} underlayColor='#009D3E'>
<Text style={styles.buttonText}>Sign In with Facebook</Text>
</TouchableHighlight>
<TouchableHighlight style={styles.button} underlayColor='#009D3E'>
<Text style={styles.buttonText}>Sign In with Email</Text>
</TouchableHighlight>
<Text style={styles.welcome}>OR</Text>
<TouchableHighlight
onPress={this.onExplorePressed.bind(this)}
style={styles.button}
underlayColor='#009D3E'>
<Text style={styles.buttonText}>Explore Something</Text>
</TouchableHighlight>
</View>
);
}
}
class ContentView extends Component {
render() {
return (
<NavigatorIOS
style={styles.container}
initialRoute={{
component: Welcome,
title: 'Welcome',
}}/>
)
}
}
var Docit = React.createClass({
render: function() {
var menu = <Menu navigator={navigator}/>;
return (
<SideMenu menu={menu}>
<ContentView/>
</SideMenu>
);
}
});
AppRegistry.registerComponent('Something', () => Something);
Am I doing something wrong here ??

I figured out that react-native-carousel component was conflicting with sidebar menu component and showing a blank screen. I posted the issue on their repository.
The simple solution is remove react-native-carousel component from everywhere, even from node_modules/, the folder inside.

Your react versions could be out of sync. I've had this happen to me when the react version bundled with the iOS app is different than the version that the packager is running.
If you're using cocoapods, make sure that the react version in your podfile is the same as your package.json.

Resources