React-Native NavigatorIOS bug not working with background image - ios

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.

Related

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 TextInput background color looks double layered when it's set to color with transparence

I have a TextInput with backgroundColor of 'rgba(255,255,255,0.16)' as below:
example on snack: https://snack.expo.io/rkEhXn6Nr
import * as React from 'react';
import { TextInput, View, StyleSheet } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<TextInput
style={styles.paragraph}
value={"bleep bleep bleep bleep"}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: 'green',
},
paragraph: {
padding: 24,
margin: 24,
fontSize: 24,
textAlign: 'center',
backgroundColor: 'rgba(255,255,255,0.16)',
},
});
It looks like as if there's a view (THERE ISN'T) with that background color and a text element also with that background color wrapped inside. How can I only have the "view" to have that background color? It looks fine on android:
Problem/Explanation:
This issue only occurs on iOS, because there it is used as performace tweak to avoid alpha blending. On iOS devices, a <Text/> automatically gets the same backgroundColor as the parent view. For more information about color inheritance you can have a look this issue on github.
In your specific case, your are applying a background color to the text container and by accident also to the text itself. That's why you get an "highlighted" Text. I could easily recreate this behavior with a simple Text Component. See the following mage:
Solution:
To overcome this issue and have a cross-platform working solution, you need to add a View which surrounds your TextInput and apply the backgroundColor (and the other container styles) there.
Code:
<View style={styles.container}>
<View style={styles.textContainer}>
<TextInput
style={styles.paragraph}
value={"bleep bleep bleep bleep"}
/>
</View>
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: 'green',
},
textContainer: {
margin: 24,
padding: 24,
backgroundColor: 'rgba(255,255,255,0.16)',
},
paragraph: {
fontSize: 24,
textAlign: 'center',
},
});
Working Example:
https://snack.expo.io/ByOzRyHHr
Output:
Please take a look at this. Don't know if that works for you. Looked pretty decent on my iOS Simulator.
import React, { useState } from 'react';
import { View, StyleSheet, TextInput } from 'react-native';
const App = () => {
const [name, setName] = useState();
return (
<View style={styles.container}>
<View style={styles.textInputContainer}>
<TextInput
style={styles.paragraph}
value={name}
onChangeText={setName}
/>
</View>
</View>
);
};
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: 'green',
},
textInputContainer: {
marginHorizontal: 24,
backgroundColor: 'rgba(255,255,255,0.16)',
},
paragraph: {
margin: 24,
fontSize: 24,
textAlign: 'center',
},
});
https://snack.expo.io/S112z5NSr

Why is TouchableOpacity half hidden when passed back in {} in react native?

React native on iOS shows the Touchable Opacity weirdly. It is rendered in such way that the button is half buried into the title. Style and creation should be right. I was following a tutorial. Copied and pasted the code from the instructor, but it is still going wrong. I wrapped the button in another styled view section and everything was fine, I wonder why this is the case.
<View>
{function()}
</View>
function() {return <Button />}
Button:
import React from 'react';
import { Text, TouchableOpacity } from 'react-native';
const Button = ({ onPress, children }) => {
const { buttonStyle, textStyle } = styles;
return (
<TouchableOpacity onPress={onPress} style={buttonStyle}>
<Text style={textStyle}>
{children}
</Text>
</TouchableOpacity>
);
};
const styles = {
textStyle: {
alignSelf: 'center',
color: '#007aff',
fontSize: 16,
fontWeight: '600',
paddingTop: 10,
paddingBottom: 10
},
buttonStyle: {
flex: 1,
alignSelf: 'stretch',
backgroundColor: '#fff',
borderRadius: 5,
borderWidth: 1,
borderColor: '#007aff',
marginLeft: 5,
marginRight: 5
}
};
export { Button };

Background color turns black after OnPress, when displayed on top of FlatList

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">

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