I'm new to coding and react native, so sorry if this is a stupid question.
I'm having issues rendering a hamburger icon from the following code. It works as expected on Android but not iOS.
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Image } from 'react-native';
import { totalPoints, totalBucks } from '../datasets/UserData.js';
export class Navbar extends React.Component {
constructor(props){
super(props);
}
burgerPress = value => {
this.props.onPress();
}
render(){
var points = totalPoints;
var bucks = totalBucks;
return(
<View style={styles.row}>
<Text style={styles.column} />
<Text style={styles.column}>
<Image source={require('../../assets/coins.png')} style={{ width: 30, height: 30, resizeMode: 'contain'}}/>
{" "}{ points }
</Text>
<Text style={styles.column}>
<Image source={require('../../assets/bills.png')} style={{ width: 40, height: 40, resizeMode: 'contain'}}/>
{" "}{ bucks }
</Text>
<View style={styles.column}>
<TouchableOpacity onPress={() => this.burgerPress()} style={{width: 40, height: 40, justifyContent: 'center', alignItems: 'center'}}>
<Image source={require('../../assets/hamburger.png')} resizeMode={'contain'} style={{ width: 40, height: 40, backgroundColor: 'lightblue', tintColor: '#ffffff', justifyContent: 'center', alignItems: 'center'}}/>
</TouchableOpacity>
</View>
</View>
);
};
};
const styles={
row: {
flex: 1,
alignItems: 'flex-end',
flexDirection: 'row',
borderBottomWidth: 1,
borderColor: "#000000",
padding: 5,
justifyContent: 'center'
},
column: {
flex: 1,
alignItems: 'center',
flexDirection: 'column',
justifyContent: 'center'
}
}
The coins and bills icons load properly on both platforms. The hamburger loads on android, but on iOS, all I get is the background color. If I delete the backgroundColor and tintColor, it renders nothing, so I think the issue is that it is not importing the image at all but only on iOS. Is there any way to get this to work?
iOS display(unexpected)
Android display(expected)
I don't see what your styles.column are specified as but as a test I would give your TouchableOpacity a width and height as well. Then try to set justifyContent: center and alignItems: center to make sure the image is not being hidden for some reason.
You might also need to specify the resizeMode={'contain'} prop in Image rather than just declaring it in your image style.
Related
I'm looking to dismiss the keyboard when the user clicks on anywhere outside the keyboard or the input, but the keyboard is not being dismissed when I click elsewhere:
<TouchableWithoutFeedback style={styles.container} onPress={Keyboard.dismiss}>
<View style={styles.inputContainer}>
<TextInput
placeholder="Search Term"
style={styles.input}
onChangeText={setSearch}
value={search}
returnKeyType="search"
onSubmitEditing={handleSubmit}
/>
</View>
</ TouchableWithoutFeedback>
The styling is pretty standard:
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
inputContainer: {
position: 'absolute',
top: stackHeaderHeight + 10,
height: height * .1,
width: '100%',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
You need to change your onPress code of TouchableWithoutFeedback
<TouchableWithoutFeedback style={styles.container} onPress={()=> Keyboard.dismiss()}>
</ TouchableWithoutFeedback>
Sample working code.
render() {
return (
<TouchableWithoutFeedback onPress={()=>Keyboard.dismiss()} >
<View style={{ flex: 1 }}>
<TextInput returnKeyType="search" style={{borderWidth:1,borderColor:'grey',marginTop:100,height:50,marginHorizontal:50}}/>
</View>
</TouchableWithoutFeedback>
);
}
I think you have a problem with your style properties. Please check on your container and inputcontainer style properties. If you have any ScrollView in your render method add following
<ScrollView keyboardShouldPersistTaps='always'>
Good afternoon everyone, I am developing an app in React native, I put the library react-native-maps to show some fixed maps in a scrollview, in android I show the coordinates with the marker but in the map moves when I try do the scroll
I'm trying with staticmap, but where I would have to leave the map in ios I'm left blank.
import React, {Component} from 'react'
import {View, Text, TouchableOpacity, Platform, Image} from 'react-native'
import MapApp from './MapApp'
const staticMapURL = 'https://maps.googleapis.com/maps/api/staticmap'
class PropertyListCard extends Component {
renderMap(){
if(Platform.OS == 'ios'){
console.log(Platform.OS)
return(
<View
style={{
width: 500,
height:500,
backgroundColor: 'red'
}}
>
<Image
source={{uri: "https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&key=MyGoogleKey"}}
style={{
width: 200,
height: 200
}}
/>
</View>
)
}else{
return(
<MapApp />
)
}
}
render(){
return(
<View style={styles.container}>
<View style={styles.titleContainer}>
<Text style={styles.titleText}>
{this.props.data.direction}
</Text>
</View>
<View style={styles.mapContainer}>
{this.renderMap()}
</View>
<TouchableOpacity
style={styles.btn}
onPress={()=>{}}
>
<Text
style={styles.btnText}
>
Ver Vecinos
</Text>
</TouchableOpacity>
</View>
)
}
}
const styles = {
container: {
flex:1,
backgroundColor: '#fff',
margin: 10,
borderRadius: 10
},
titleContainer:{
height: 40,
justifyContent: 'center',
borderBottomWidth: 1,
borderColor: 'grey'
},
titleText: {
paddingLeft: 20,
fontSize: 17,
fontWeight: 'bold'
},
mapContainer:{
width: '100%',
height: 200
},
btn:{
height: 50,
width: '100%',
backgroundColor: '#008591',
borderBottomLeftRadius: 10,
borderBottomRightRadius: 10,
alignItems: 'center',
justifyContent: 'center',
},
btnText: {
color: '#fff',
fontSize: 17,
fontWeight: 'bold',
}
}
export default PropertyListCard
there is no support for litemode on ios
https://github.com/react-community/react-native-maps/issues/1411#issuecomment-310380854
Very strange behavior, I am using a FlatList, and on top of it there are 2 floating buttons (TouchableOpacity) (absolute position) and when they are pressed, their background color turns black.
This happens only on IOS.
Code:
Render
let content = (
<CollapsableNavList
onListScroll={this.showOrHideFilterButtons}
showFilterButtonsOnScroll={this.showOrHideFilterButtons}
style={styles.list}
isHorizontal={false}
dataModel={this.props.isFetching ? this.props.whileFetchingDisplayedResults : this.props.dataModel}
isFetching={false}
onRowSelect={this._onRowSelect}
didScrollWithOffset={this.didScrollWithOffset}
renderRowContent={this.renderRowContent}
keyExtractor={(item) => {
if (this.props.isFetching) {
return item
}
const property = item
return property.propertyId
}}
>
{header}
</CollapsableNavList>
)
return (
<View style={[styles.container, styles.relative]}>
<View style={styles.filterBtnBlock}>
<AdditionalSearchParamsButton
title='Map'
iconName='map'
onPress={this.onMapPress}
/>
</View>
{content}
</View>
)
export default class AdditionalSearchParamsButton extends Component {
// Prop type warnings
static propTypes = {
iconName: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
onPress: PropTypes.func.isRequired
}
render () {
const { iconName, title, onPress } = this.props
return (
<View>
<TouchableHighlight onPress={onPress} underlayColor={Colors.clear}>
<View style={styles.innerContainer}>
<McIcon
name={iconName}
style={styles.additionalPropsIcon}
/>
<Text style={styles.additionalPropsText}>{title}</Text>
</View>
</TouchableHighlight>
</View>
)
}
}
export default StyleSheet.create({
container: {
height: 50,
width: 150,
alignItems: 'center',
justifyContent: 'center'
},
innerContainer: {
height: 36,
width: 126,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: Colors.snow,
borderRadius: 18,
elevation: 2,
shadowOffset: {width: 0, height: 2},
shadowColor: 'black',
shadowOpacity: 0.3,
marginBottom: 5,
},
additionalPropsBtn: {
height: 36,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: Colors.snow
},
additionalPropsText: {
...Fonts.style.bigTitle,
color: Colors.blue,
paddingLeft: 10
},
additionalPropsIcon: {
fontSize: 22,
color: Colors.blue
}
})
What I've tried:
-Setting underlays color to clear, with no success.
-Adding different layers under, no success.
-This only happens when displayed on a list, happens with ListView too.
Please use TouchableOpacity instead of TouchableHighlight
TouchableHighlight Highlight the background when you click
Try add this <TouchableHighlight underlayColor='none' />
try this in your TouchableOpacity props
underlayColor="#ffffff00"
I have solved it using activeOpacity with background color
<TouchableOpacity activeOpacity={1} backgroundColor="#FFF"></TouchableOpacity>
You can use own backgroundColor
Wrap View with <TouchableHighlight underlayColor="#fff">
export class CameraView extends Component {
render(){
return(
<View style={{
flex: 1,
width: '100%',
height: '100%',
}}>
<Camera
ref={(cam) => {
this.camera = cam;
}}
style={styles.preview}
aspect={Camera.constants.Aspect.fill}>
<CaptureControls></CaptureControls>
<Image></Image>
</Camera>
</View>
);
}
}
export class CaptureControls extends Component {
render(){
return(
<View style={{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
bottom: 30,
}}>
<Image style={{
width: 30,
height: 30,
marginRight: 75,
}} source={require('img/opengallery.png')}></Image>
<TouchableHighlight onPress={this.takePicture.bind(this)}>
<Image style={{
width: 70,
height: 70,
}} source={require('img/takepicture.png')}> </Image>
</TouchableHighlight>
<Image style={{
width: 30,
height: 30,
marginLeft: 75,
}} source={require('img/switchcam.png')}></Image>
</View>
);
}
takePicture() {
this.camera.capture()
.then((data) => console.log(data))
.catch(err => console.error(err));
}
}
Here's my code. When pressing the takepicture button I get undefined is not an object. What is wrong with my code? takePicture() worked on a Text element though. I added a TouchableHighlight around the Image and added the onPress to TouchableHighlight, but now it crashes.
Kind regards,
Matthew
I guess you figured this out in the meantime. The 'camera' variable is assigned in the context of CameraView but the code tries to access it from within CaptureControls.
I have a login form with two text inputs stacked vertically and a container view with two buttons below the inputs:
I want the two buttons to stretch to fill the width of the button container (red), so each button would take half its size. However I can't get it to work. I've tried various combinations of flex* properties with no luck.
In native iOS I would use a UIStackView for this with orientation = horizontal. React Native documentation says that pretty much any layout can be achieved with flexbox.
This is what my component looks like right now:
import React, {Component} from 'react';
import {KeyboardAvoidingView, TextInput, View, StyleSheet} from 'react-native';
import Button from 'react-native-button';
export default class Login extends Component {
render() {
return (
<KeyboardAvoidingView style={styles.container}>
<TextInput
placeholder="LOGIN"
placeholderTextColor="#505050"
style={styles.input}/>
<TextInput
placeholder="PASSWORD"
placeholderTextColor="#505050"
style={styles.input}/>
<View style={styles.buttonContainer}>
<Button
onPress={() => this.logIn()}
style={[styles.button, styles.loginButton]}>
Log in
</Button>
<Button
onPress={() => this.register()}
style={[styles.button, styles.registerButton]}>
Register
</Button>
</View>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingHorizontal: 16,
backgroundColor: 'lightgray'
},
input: {
height: 40,
marginBottom: 12,
paddingHorizontal: 8,
backgroundColor: 'white'
},
buttonContainer: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'red'
},
button: {
padding: 8,
color: 'white',
backgroundColor: 'steelblue'
},
loginButton: {
marginRight: 8
}
});
If I add flex: 1 to the button style they become:
What am I doing wrong?
Yes. Its because of the react-native-button component. You have to use the containerStyle property of the Button component to style the container.
import React, {Component} from 'react';
import {KeyboardAvoidingView, TextInput, View, StyleSheet} from 'react-native';
import Button from 'react-native-button';
export default class Login extends Component {
render() {
return (
<KeyboardAvoidingView style={styles.container}>
<TextInput
placeholder="LOGIN"
placeholderTextColor="#505050"
style={styles.input}/>
<TextInput
placeholder="PASSWORD"
placeholderTextColor="#505050"
style={styles.input}/>
<View style={styles.buttonContainer}>
<Button
onPress={() => this.logIn()}
style={styles.buttonText}
containerStyle={styles.button}
>
Log in
</Button>
<Button
onPress={() => this.register()}
style={styles.buttonText}
containerStyle={styles.button}
>
Register
</Button>
</View>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingHorizontal: 16,
backgroundColor: 'lightgray'
},
input: {
height: 40,
marginBottom: 12,
paddingHorizontal: 8,
backgroundColor: 'white'
},
buttonContainer: {
height: 60,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'red'
},
button: {
flex: 2,
padding: 8,
backgroundColor: 'steelblue',
alignSelf: 'stretch',
justifyContent: 'center',
},
buttonText: {
color: 'white',
}
});