My target is to show splash screen till my Webview url is fully loaded. It is react native app, but I guess any suggestions for iOS will work as well. Does that possible?
To show a splash screen when the app is loadin you can check out this project on Github: react-native-splashscreen.
This can be installed using npm:
npm install react-native-splashscreen --save
Usage:
'use strict';
var React = require('react-native');
var {
AppRegistry,
View,
Text,
} = React;
var SplashScreen = require('#remobile/react-native-splashscreen');
var SplashViewApp = React.createClass({
componentDidMount: function() {
SplashScreen.hide();
},
render() {
return(
<View>
<Text>
Lorem Ipsum..
</Text>
</View>
);
}
});
AppRegistry.registerComponent('SplashViewApp', () => SplashViewApp);
Otherwise use something like react-native-loading-spinner-overlay. Install it through:
npm install --save react-native-loading-spinner-overlay
Use as follows:
import React, { View } from 'react-native';
import Spinner from 'react-native-loading-spinner-overlay';
class MyComponent extends React.Component {
constructor(props) {
super();
this.state = {
visible: false
};
}
/* eslint react/no-did-mount-set-state: 0 */
componentDidMount() {
setInterval(() => {
this.setState({
visible: !this.state.visible
});
}, 3000);
}
render() {
return (
<View style={{ flex: 1 }}>
<Spinner visible={this.state.visible} />
</View>
);
}
}
Related
I'm trying to show an icon when my app makes a request to the backend. But sometimes the icon does not disappear.
I have the following code:
const [spinner, setSpinner] = useState(false);
useEffect(() => {
_fetchForm();
}, []);
async function _fetchForm () {
try {
setSpinner(true);
const form = await api.fetchCreateForm();
dispatch(swotsActions.setSwotsForm(form));
setSpinner(false);
} catch {
setSpinner(false);
}
}
if (!spinner) {
return <Form/>;
} else {
return <Spinner/>;
}
The Spinner component:
import React from 'react';
import { ActivityIndicator, Modal, StyleSheet, View } from 'react-native';
import { colors } from 'utilities/styles';
export default function Spinner () {
return (
<Modal
onRequestClose={() => {}}
transparent={true}
visible={true}
>
<View style={styles.wrapper}>
<ActivityIndicator
animating={true}
color={colors.black}
size='large'
/>
</View>
</Modal>
);
}
And only on ios devices sometimes both components appear
I using expo sdk 44, the same code works on skd 42 (which will be deprecated soon)
I'm new to react-native technology and I faced this issue as attached images after I created one component (Header) and tried to use it inside app.js and run iOS emulator. please any advice.
1
2
3
4
5
https://snack.expo.io/r1tmEEYs4 live basic sample
you return has a little mistake you must change you header codes like this
import React, { Component } from 'react';
import { Text } from 'react-native';
class Header extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<Text>
Header Text
</Text>
);
}
}
export default Header;
and you must call that like this
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Header from './components/Header';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Header/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#ecf0f1',
padding: 8,
},
});
First you open a terminal and run
npm start -- --reset-cache
then
react-native run-ios
Is there a way I can fix this without using redux?
This is only happening on iOS, on android the AddListener works perfectly fine without it.
I have a component and I call the props.navigation.addListener on the componentDidMount functon.
Some code to help understand exactly where it breaks:
componentDidMount(){
var _this = this;
this.willBlurListener = this.props.navigation.addListener('willBlur', () => {
_this.timer.clearTimeout();
});
this.willFocusListener = this.props.navigation.addListener('willFocus', () => {
_this._action();
});
AppState.addEventListener('change', this._handleAppStateChange);
}
And then I use the component like this:
<Inactivity name='SomeNameView' navigation={ this.props.navigation }>
{this.renderDetails()}
</Inactivity>
Can you please try to use withNavigation function, it returns a HOC that has navigation in it props so you don't have to pass from the parent component to the child:
I created a simple app that uses this concept that probably can help you:
import React from 'react';
import {
View,
Text,
Button,
} from 'react-native';
import {
createStackNavigator,
withNavigation,
} from 'react-navigation';
class SomeComponent extends React.Component {
componentDidMount() {
this.willBlurListener = this.props.navigation.addListener('willBlur', () => {
this.someAction();
})
}
someAction() {
console.log('Some action is called!');
}
componentWillUnmount() {
this.willBlurListener.remove();
}
render() {
return (
<View>
<Text>Some Component</Text>
<Button
title={'Open settings'}
onPress={() => this.props.navigation.navigate('Settings')}
/>
</View>
)
}
}
const SomeComponentWithNavigation = withNavigation(SomeComponent);
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Home'
}
render() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<SomeComponentWithNavigation/>
<Text>Welcome to home screen!</Text>
</View>
)
}
}
class SettingsScreen extends React.Component {
static navigationOptions = {
title: 'Settings'
}
render() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text>Welcome to settings screen!</Text>
</View>
)
}
}
export default createStackNavigator(
{
Home: HomeScreen,
Settings: SettingsScreen,
},
);
I have used import { useNavigation } from '#react-navigation/native'; to achieve this. This could work for you as well.
Sample code example
import { useNavigation } from '#react-navigation/native';
class CurrentOrderClass extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
this.onFocusSubscribe = this.props.navigation.addListener('focus', () => {
// Your code
});
}
componentWillUnmount() {
this.onFocusSubscribe();
}
.
.
.
.
function CurrentOrder(props) {
const navigation = useNavigation(props)
return <CurrentOrderClass {...props} navigation={navigation} />
}
}
export default CurrentOrder;
You can also check to React Native docs https://reactnavigation.org/docs/navigation-events/
I found this a bit tricky and after looking into it for a bit, I come up with the following solution. Note that is tested on React Navigation 5.x.
import { useIsDrawerOpen } from "#react-navigation/drawer";
let lastDrawerStateIsOpened = false;
const DrawerComponent = (props) => {
const isOpened = useIsDrawerOpen();
if (lastDrawerStateIsOpened != isOpened) {
lastDrawerStateIsOpened = isOpened;
if (isOpened) {
// Do what needs to be done when drawer is opened.
}
}
};
Also, note that I'm using a functional component.
I want to add WebView in my app and want to scale the page to fit into my mobile.
I use scalesPageToFit to do this, but it don't work in Android.
I'm using 0.30 verison of react-native.
this is my code:
class Test extends Component {
constructor(props) {
super(props);
this.state = {scalesPageToFit: true};
}
onNavigationStateChange(navState) {
this.setState({
scalesPageToFit: true
});
}
render() {
return (
<View>
<WebView
automaticallyAdjustContentInsets={false}
scalesPageToFit={this.state.scalesPageToFit}
onNavigationStateChange={() => this.onNavigationStateChange()}
style={{height: 500}}
source={{uri: "http://www.avosannonces.fr"}}
/>
</View>
);
}
}
This is what I get : This is what i get with scalesPageToFit in react-native
I'm new to react native.I need simple scenario in here by click button go to new screen.
React native button click move to another screen
I tried this
<TouchableHighlight
onPress={this.register}
style={styles.button1}>
<Text style={styles.buttontext1}>
Registration
</Text>
</TouchableHighlight>
register(){
//What should I write in here to go to a new layout.
}
Example:
write next code to index.ios.js
'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
View,
NavigatorIOS
} from 'react-native';
var rootPage = require('./root.IOS')
var client = React.createClass({
render() {
return (
<NavigatorIOS
style = {styles.container}
initialRoute={{
title: "Root",
navigationBarHidden: true,
component:rootPage
}}/>
);
}
});
const styles = StyleSheet.create({
container: {
flex: 1,
}
});
AppRegistry.registerComponent('client', () => client);
in file "root.IOS.js"
'use strict';
import React, {
StyleSheet,
View,
TouchableHighlight,
Text,
Dimensions,
} from 'react-native';
var NextPage = require('./nextPage.IOS.js');
var rootPage = React.createClass({
goDerper: function() {
this.props.navigator.push({
title: 'nextPage',
component: NextPage,
navigationBarHidden: true,
passProps: {myElement: 'text'}
});
},
render: function(){
return(
<View style={styles.container}>
<TouchableHighlight
onPress={() => this.goDerper()}>
<Text>We must go derper</Text>
</TouchableHighlight>
</View>
);
}
})
var styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 20
}
});
module.exports = rootPage;
this code in file "nextPage.IOS.js"
'use strict';
var React = require('react-native');
var {
StyleSheet,
View,
Text,
} = React;
var Register = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={styles.text}>My value: {this.props.myElement}</Text>
<Text>any text</Text>
</View>
);
}
})
var styles = StyleSheet.create({
container: {
flex: 1
}
});
module.exports = nextPage;
You need to set up a navigator component, and use the navigator.push function. This answer should walk you through it.
If you want it simple, you can use this package : https://github.com/react-native-simple-router-community/react-native-simple-router