I created a Wallpaper.js where is my background image. However, it is not displaying in full screen on my emulator.
My Wallpaper.js
import React, { Component } from 'react';
import { StyleSheet, ImageBackground } from 'react-native';
import bgSrc from '../../images/wallpaper.png';
export default class Wallpaper extends Component {
render() {
return (
<ImageBackground style={styles.picture} source={bgSrc}>
{this.props.children}
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
picture: {
flex: 1,
width: null,
height: null,
resizeMode: 'cover',
},
});
I call this wallpaper in my login page:
export default class LoginScreen extends Component {
render() {
return (
<Wallpaper>
</Wallpaper>
);
}
}
The result is a empty white space in the top. Why it is not full screen?
Thanks
You have to check the headerMode of your navigator stack. It's have to be 'modal'
Related
Is it possible to call another render() inside my App.js render. I just start working with react native, so it might look stupid.
I create the following file. Splash.js
import React, { Component } from 'react'
import { StyleSheet, Text, View } from 'react-native'
export default class Splash extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.title}></Text>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontWeight: 'bold',
fontSize: 18
}
})
How can I call it inside my App.js to be the default page?
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
// Call the Splash.js
)
}
}
Thanks
There is no need to call render() inside a render() function. You can convert your splash component into a functional component, which just returns the JSX:
import React from 'react';
import {View, Text} from 'react-native';
export default function Splash() {
return (
<View>
<Text>Splash</Text>
</View>
);
}
Your app component will then render the returned JSX like so:
import React from 'react'
import Splash from './your-path-to-the-splash-file'
export default class App extends React.Component {
render() {
return (
<View>
<Splash/>
</View>
);
}
};
You should check out the official react docs: https://reactjs.org/docs/components-and-props.html
I've created a few components. One of them should allow nesting however it inexplicably does not (inexplicable because I couldn't find any posts with quite this problem)
There is one image required to run this (it can be replaced with anything)
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { View, StatusBar, StyleSheet, ImageBackground } from 'react-native';
export class PhonyStatusBar extends Component {
render () {
return (
<View style={styles.statusBar} />
);
}
}
export class HomeScreen extends Component {
static propTypes = {
children: PropTypes.string
}
render () {
return (
<View>
{this.props.children}
</View>
);
}
}
export class AppGrid extends Component {
render () {
return (
<View />
);
}
}
export default class App extends Component {
render() {
return (
<View>
{/* hide system status bar */}
<StatusBar hidden={true} />
<PhonyStatusBar />
{/* throw in our own status bar */}
<HomeScreen>
<View />
</HomeScreen>
</View>
);
}
}
const styles = StyleSheet.create({
backgroundImage: {
width:'100%',
height:'100%',
},
statusBar: {
width: '100%',
height: 25.33,
backgroundColor: 'rgba(255, 157, 0, 0.5)'
},
});
In react children is a built in prop, already defined by the library, for components. This is not a prop that you should be defining manually. See this for more detail: https://reactjs.org/docs/jsx-in-depth.html#children-in-jsx
Try removing:
static propTypes = {
children: PropTypes.string
}
from HomeScreen to resolve the issue.
I'm trying to add an overlay (e.g. to display error popups/toasters/debug buttons etc) to a react-navigation navigator.
However I have a problem:
When I put the react navigator in a view, with the overlay on top, the react navigator either doesn't appear or is distorted in some way.
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { StackNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
return <Text>Hello, Navigation!</Text>;
}
}
const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
});
class SimpleAppWithOverlay extends React.Component {
render() {
return(
<View>
<View style={{position: "absolute", backgroundColor:"transparent", margin:30}}>
<Text>Some Overlay</Text>
</View>
<SimpleApp/>
</View>);
}
}
Here are two snippets showing what I mean in a live editor:
Basic react navigation setup: https://snack.expo.io/ryI4oCvQW
Same, but with an overlay attempt: https://snack.expo.io/HkSgoCDX-
You can see in the second example, the overlay appears but the underlying app is just not visible.
Can this work? How?
Changed your code a bit
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
import { StackNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
return (
<View style={{ flex: 1 }}>
<Text>Hello, Navigation!</Text>
</View>
)
}
}
class SimpleAppWithOverlay extends React.Component {
render() {
return (
<View style={{flex: 1}}>
<SimpleApp />
<View style={{ position: "absolute", backgroundColor: 'rgba(255,0,0,0.4)', top: 0, bottom: 0, left: 0, right: 0 }}>
<Text style={{ paddingTop: 8 }}>Some Overlay</Text>
</View>
</View>
);
}
}
const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
});
AppRegistry.registerComponent('overlayapp', () => SimpleAppWithOverlay);
You should note that position: 'absolute' is only positioning relative to the parent not absolutely absolute like in css.
If you want to overlay above the navigationBar you can probably do something similar with navigationOptions.headerRight.
I'm using react navigation for my app development. When i run log-android, it keeps logging something like this.
Navigation Dispatch: Action: {...}, New State: {...}
which is from createNavigationContainer.js line 150.
I've run through github and document said it could be done by by setting onNavigationStateChange={null} on a top-level navigator.
How can i achieve this by setting onNavigationStateChange={null} and where should i set it?
I've try to set like below, but it the page will not be able to redirect to other page.
export default () => {
<App onNavigationStateChange={null} />
}
Below are my app.js code
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
import { StackNavigator,DrawerNavigator } from 'react-navigation';
import DrawerContent from './components/drawer/drawerContent.js';
import News from './components/news/home.js';
const drawNavigation = DrawerNavigator(
{
Home : {
screen : News ,
navigationOptions : {
header : null
}
}
},
{
contentComponent: props => <DrawerContent {...props} />
}
)
const StackNavigation = StackNavigator({
Home : { screen : drawNavigation,
navigationOptions: {
header: null
}
}
});
export default StackNavigation;
This is my drawerContent.js
import React, {Component} from 'react'
import {View,Text, StyleSheet,
TouchableNativeFeedback,
TouchableOpacity,
TouchableHighlight
} from 'react-native'
import { DrawerItems, DrawerView } from 'react-navigation';
import Icon from 'react-native-vector-icons/Octicons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
class DrawerContent extends Component {
constructor(props){
super(props);
console.log('DrawerContent|testtttttt');
}
render(){
return (
<View style={styles.container}>
<Text>Hi darren</Text>
<TouchableOpacity style={{ marginBottom:5 }} onPress={() => this.props.navigation.navigate('RegistrationScreen') } >
<View style={styles.nonIconButton}>
<Text style={{ color: 'black',fontSize: 13 }} >Sign Up</Text>
</View>
</TouchableOpacity>
<Text>Hi darren</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
export default DrawerContent;
First, make sure you are using the latest release of react-navigation as the comment noting that the fix was committed is fairly recent.
Based on your code example, to disable logging for all navigation state changes, you would want to replace this code:
export default StackNavigation;
with:
export default () => (
<StackNavigation onNavigationStateChange={null} />
);
as StackNavigation appears to be your root navigator.
React navigation is great, but this logging is really bad. Solution
const AppNavigator = StackNavigator(SomeAppRouteConfigs);
class App extends React.Component {
render() {
return (
<AppNavigator onNavigationStateChange={null} />
);
}
}
I pretty much copied and pasted the demo code from Facebook, but the initialRoute component does not render. Answers like setting flex:1 as suggested by similar questions didn't work for me. Any tips?
import React, { Component } from 'react';
import {
StyleSheet,
NavigatorIOS,
StatusBar,
AppRegistry,
View,
Text,
TouchableHighlight,
} from 'react-native';
import NativeThing from './components/ReactNative';
export default class ListsList extends Component {
render() {
return (
<NavigatorIOS
initialRoute={{
component: MyScene,
title: 'My Initial Scene',
}}
style={{flex: 1}}
/>
);
}
}
class MyScene extends Component {
_onForward = () => {
this.props.navigator.push({
title: 'Scene ' + nextIndex,
});
}
render() {
return (
<View>
<Text>Current Scene: { this.props.title }</Text>
<TouchableHighlight onPress={this._onForward}>
<Text>Tap me to load the next scene</Text>
</TouchableHighlight>
</View>
)
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
}
});
AppRegistry.registerComponent('ListsList', () => ListsList);
The navigation bar by default overlaps the content of MyScene component. This is the default behaviour of the NavigatorIOS with a translucent
navigation bar.
So you have two options:
Add style paddingTop: 64 to the View of MyScene.
Add property translucent={ false } to the NavigatorIOS