I have the next code
import {Navigator, Modal, StyleSheet} from 'react-native';
....
....
....
render(){
<View>
<Modal/>
<MyView>
</View>
}
I want MyView's to be above the Modal one, is that possible?
Related
I am new in react native and want to display images, i setup project with expo and try following code for displaying image i do some research but i think code is right, i don't know why it's not displaying in simulator, Do anyone have any idea.
code:
import React from 'react';
import { View, Text, StyleSheet, Image } from 'react-native';
const ImageDetail = (props) => {
return (
<View>
<Image source={require('./beach.jpg')} />
<Text>{props.title}</Text>
</View>
)
};
const style = StyleSheet.create({
});
export default ImageDetail;
I have image in same folder where file is.
Provide a style with height and width for the Image, without that the image component wont display the image.
<Image style={{height:100,width:100}} source={require('./beach.jpg')} />
I need to update my app name in launch/splash screen.
How can I update my launch screens name?
Can any one give the steps how to update the launch screen text?
I have Changed the LaunchScreen.xib in Xcode
<string key="text">Renamed </string>
You should :
1) Change class in index.js file from App.js to whichever class you want
import {AppRegistry} from 'react-native';
import routes from './src/Routes';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => routes);
2) Create Route file
import React from 'react'
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import Splash from './Splash'
import Calc from './Calc'
const AppContainer = createAppContainer(
createSwitchNavigator(
{
Splash: Splash,
Calc: Calc,
},
{
initialRouteName: 'Splash',
},
),
)
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
3) Create desired splash screen
import React, { Component } from 'react';
import {
Text,
Image,
View
} from 'react-native';
import Style from './Style'
class Splash extends Component {
componentDidMount() {
setTimeout(() => {
this.props.navigation.navigate('Calc')
}, 1500)
}
render() {
return (
<View style={Style.splashContainer}>
<Image
source={{ uri: 'https://cdn2.iconfinder.com/data/icons/ios7-inspired-mac-icon-set/1024/Calculator_5122x.png' }}
style={Style.splashImage}
/>
<Text style={Style.splashText}>Calculator</Text>
</View>
)
}
}
export default Splash
In this last file you can design your splash screen however you want
That's how you can create custom launcher screen and splash screen in react native
Thank you
I am using react native to develop a simple Touchablehighlight element with onpress event. iOS is ok to go but Android takes few seconds to load a function each time. I have looked up few possible solutions such as TouchableWithoutFeedback, TouchableNativeFeedback, etc.
My idea is to click a TouchableHighlight -> call handlePress function -> alert('hello world') under a flatlist
Here is my code.
import React from "react";
import { Image, TouchableHighlight, Platform, TouchableNativeFeedback, View, Text } from "react-native";
import styles from "./Styles";
// Plugin
import FastImage from "react-native-fast-image";
class BacktoTop extends React.Component {
constructor(props) {
super(props);
}
_handlePress = () => {
alert('hello world')
}
render() {
return (
<TouchableHighlight
style={ styles.container }
underlayColor={"#ffffff"}
// onPress={this.props.handlePress }
onPress={this._handlePress }>
<FastImage
source={
(Platform.OS === 'ios') ?
require("../../images/back_to_top.png")
:
{
// 6 months at least 1 view no deletion
uri: 'https://image.ibb.co/grvFS8/back_to_top.png',
priority: FastImage.priority.cacheOnly,
}
}
resizeMode={FastImage.resizeMode.cover}
style={{ width: 35, height: 35 }} />
</TouchableHighlight>
);
}
}
export default BacktoTop;
Thank you so much for your help.
I think the more view components in the upper level to be rendered, the longer time it takes to load.
After I deleted some of my in parent and removed onMomentumScrollEnd the reaction is improved.
Thanks.
What is consistent
[Edit: No longer consistent for whatever reason]
import React from 'react';
import {Image} from 'react-native';
import STYLE from './styles';
export default class OwnMarker extends React.Component {
render() {
return(
<Image
style={STYLE.marker}
source={require('../../../../resources/images/marker.png')}
resizeMethod="resize"
/>
);
}
}
This results in a consistently working solution.
What is inconsistent
import React from 'react';
import {Image} from 'react-native';
import STYLE from './styles';
//Note import
import Images from '../../../../resources/Images';
export default class OwnMarker extends React.Component {
render() {
return(
<Image
style={STYLE.marker}
source={Images.own_marker}
resizeMethod="resize"
/>
);
}
}
And the imported object looks like this:
//Images.js
module.exports = {
own_marker: require('./images/marker.png'),
}
This results in an inconsistent solution
Sometimes these images load and sometimes they don't. It might only render the image for 3 of the markers, none of them, all of them, 7 or them, or whatever other possibility between none and all of the markers loading.
How can I make this work from the import statement and why is it currently inconsistent?
It's hard to sleep at night with a solution like this, but this is the only one that has worked for me.
import React from 'react';
import {Image} from 'react-native';
import STYLE from './styles';
import Images from '../../../../resources/Images';
export default class OwnMarker extends React.Component {
constructor(props){
this.state = {
// HACK
initialRender: true
}
}
render() {
return(
<Image
style={STYLE.marker}
source={Images.own_marker}
resizeMethod="resize"
// HACK
onLayout={() => this.setState({ initialRender: false })}
key={`${this.state.initialRender}`}
/>
);
}
}
Im trying to use Drawer navigation. I have header.js components which has a hamburger icon to open the left navigation menu
//Header.js
import React from 'react';
import { Text, View, Image, TouchableHighlight} from 'react-native';
import { DrawerNavigator } from 'react-navigation';
// Make a component
const Header = (props, {navigate}) => {
const { textStyle, viewStyle, imgstyle } = styles;
return (
<View style={viewStyle}>
<TouchableHighlight onPress={()=> this.props.navigation.navigate('DrawerToggle')}> //here the error is coming
<Image style={{width:40, height:40}}
source={require('./../media/hamburger.png')}
/>
</TouchableHighlight>
<Text style={textStyle}>{props.headerText}</Text>
</View>
);
};
export default Header;
Here is App.js
const MyApp = DrawerNavigator({
Login: {
screen: Login,
},
Signup: {
screen: Signup,
},
});
export default class App extends React.Component {
render() {
return <MyApp />;
}
}
Here is one of the comoponent Login.js
import React, { Component } from 'react';
import {
Text, View, StyleSheet
} from 'react-native';
import Header from './Header';
export default class Login extends Component{
static navigationOptions = {
drawerLabel: 'Login',
};
render(){
return(
<View >
<Header headerText={'Login'}/>
<Text>Login Screen</Text>
</View>
);
}
}
I am not sure what I am missing to fix this. Please check my code.
EDITED:
I tried without "this" to but no luck. I am checking everywhere in the internet but couldn't find the exact solution or I couldn't get a solution to my mind. Can someone who is good with react native respond on this, Please?
The problem is - you use this keyword in a stateless component: this.props.navigation.navigate('DrawerToggle').
Try just props.navigation.navigate('DrawerToggle') since this is not pointing to the Header component instance in your case.
this in a stateless component is "inherited" from the calling scope (since stateless component is an "arrow" function) and likely points to window or global.