I am trying to create a basic app with React Navigation 5 and Native Base. But it seems like React Navigation overrides of Native Base. The Content does not render simple text.
/**
* #format
*/
import React from 'react';
import 'react-native-gesture-handler';
import { AppRegistry } from 'react-native';
import NavigationInitializer from './route/NavigationSetup';
import { name as appName } from './app.json';
import { LogBox } from 'react-native';
import { Root, Container, Content, Header, Text, Footer } from 'native-base';
LogBox.ignoreAllLogs(); // remove unnecessary warnings
// This is useful when there's a noisy warning that cannot be fixed, like those in a third-party dependency.
// AppRegistry.registerComponent(appName, () => NavigationInitializer);
AppRegistry.registerComponent(appName, () => () =>
<Container>
<Header>
<Text style={{ color: "black" }}>
HEADER
</Text>
</Header>
<Content style={{ backgroundColor: "red" }}>
<Text style={{ color: "black" }}>
This is Content Section
</Text>
</Content>
<Footer>
<Text style={{ color: "black" }}>
This is Footer Section
</Text>
</Footer>
</Container>
);
Ok. I resolved it by upgrading React native and native base.
https://github.com/GeekyAnts/NativeBase/issues/3204#issuecomment-667596807
Related
import Icon from 'react-native-vector-icons/Feather';
import Icon from 'react-native-vector-icons/Ionicons';
I want to use icons both from 'react-native-vector-icons/Feather' and 'react-native-vector-icons/Ionicons' inside same component.
But importing two Icon giving Syntax Error.
export default function App() {
return (
<SafeAreaView style={styles.container}>
{/* message-circle is from 'react-native-vector-icons/Feather' */}
Icon name="message-circle" size={20} color='white' />
{/* md-caret-down is from 'react-native-vector-icons/Ionicons' */}
{/* Icon name="message-circle" size={20} color='white' /> */}
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
});
Import react native vector icons using (npm i react-native-vector-icons).
Then use the vector icons from different packages into your current component such as View, SafeAreaView , ScrollView ,....etc, as the code below.
You can use any package from vector icons like this method.
import {Ionicons,MaterialCommunityIcons,FontAwesome5} from '#expo/vector-icons';
export default function App() {
return (
<SafeAreaView style={styles.container}>
<Ionicons
name="information-circle"
size={24}
color={"#3280F0"}
/>
{/* information-circle is from 'expo/vector-icons/Ionicons' */}
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
You can use modules imports of same name by aliasing as follows.
import {Icon as FeatherIcon} from 'react-native-vector-icons/Feather';
import {Icon as Ionicons} from 'react-native-vector-icons/Ionicons';
For more reference you can refer this documentation on medium.com
For as aliasing you have to use unique name. like
import {Something as SomethingNewName} from .....
I am developing a mobile react native expo app. I am using BottomTabNavigator (NavigationContainer). As the name suggests it should appear at the bottom but it is incorrectly appearing on top.
I already have another image (logo.png) on the top of the screen and the navigationbar (or NavigationContainer) is also coming on top and overlapping above the image. Please help me resolve this issue. See my code below:
In the below code MyTabs is the Navigator created from createBottomTabNavigator(). This is incorrectly appearing on top of the screen.
import React from 'react';
import { Image, StyleSheet, Text, View, SafeAreaView, StatusBar, Platform } from 'react-native';
import logo from './assets/logo.png';
import { NavigationContainer } from '#react-navigation/native';
import MyTabs from './navigator/AppNavigator';
export default function App() {
return (
<SafeAreaView style={{ paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight: 0 }} >
<View>
<View style={styles.container}>
<Image source={logo} style={{ width: 100, height: 100 }} />
<Text style={{color: '#888', fontSize: 18, alignItems: 'center'}}>
To share a photo from your phone with a friend or anyone, just press the button below!
</Text>
</View>
<View >
<NavigationContainer >
<MyTabs /> // This is incorrectly coming on top of screen.
</NavigationContainer>
</View>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
// justifyContent: 'center',
},
});
The NavigationContainer should be the outermost component in App. This then wraps the Tab.Navigator component (in your case MyTabs), where you create tabs linked to each of your components. Inside your components, you are able to utilize SafeAreaView to then display the image at the top of the screen. Any type of Navigation scheme has to be made the top most component in the hierarchy in react native, wrapping the rest of your components. I've altered your code below:
import React from 'react';
import { Image, StyleSheet, Text, View, SafeAreaView, StatusBar, Platform } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
export default function App() {
const Tab = createBottomTabNavigator()
return (
<NavigationContainer >
<Tab.Navigator>
<Tab.Screen name="Home" component={myComponent} />
</Tab.Navigator>
</NavigationContainer>
);
}
const myComponent = () => {
return (
<SafeAreaView style={{ paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight: 0 }} >
<View>
<View style={styles.container}>
<Image source={require('#expo/snack-static/react-native-logo.png')} style={{ width: 100, height: 100 }} />
<Text style={{color: '#888', fontSize: 18, alignItems: 'center'}}>To share a photo from your phone with a friend or anyone, just press the button below!</Text>
</View>
</View>
</SafeAreaView>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
// justifyContent: 'center',
},
});
I have a url in the Webview like https://www.nytimes.com/ The current code works inital page load but If I type tap anything in the link, the page takes a while to load and there are no loading indicators in the website. Is there any way we can put a page loading indicator in React Native while we click on any link or page loading specially if it is server side rendered like next js?
Here is my ReactNative code.
import * as React from 'react';
import {
View,
Text,
Image,
SafeAreaView,
ScrollView,
TextInput,
TouchableOpacity,
} from 'react-native';
import styles from './styles';
import { WebView } from 'react-native-webview';
// import WelcomeSwiper from '../../components/WelcomeScreen/WelcomeSwiper';
import LoadingIcon from '../../components/Loading/index.js';
const WebView = ({ navigation }) => {
return (
<SafeAreaView style={styles.container}>
<WebView
javaScriptEnabled={true}
domStorageEnabled={true}
renderLoading={LoadingIcon}
source={{ uri: 'https://www.nytimes.com/ ' }}
startInLoadingState={true}
/>
</SafeAreaView>
);
};
export default WebView;
Here is my loading component
import React from 'react';
import { StyleSheet, Platform, ActivityIndicator } from 'react-native';
const LoadingIcon = () => {
return (
<ActivityIndicator
color='#009688'
size='large'
style={styles.ActivityIndicatorStyle}
/>
);
}
export default LoadingIcon;
const styles = StyleSheet.create(
{
WebViewStyle:
{
justifyContent: 'center',
alignItems: 'center',
flex: 1,
marginTop: (Platform.OS) === 'ios' ? 20 : 0
},
ActivityIndicatorStyle: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
alignItems: 'center',
justifyContent: 'center'
}
});
we can use these two approaches to get the result:
You can check if the WebView is loading something or not with the onLoadProgress method. This method gives you a number between 0 and 1. If the page is fully loaded it will return number 1, update your state and show the ActivityIndicator according to it:
you can use onLoadStart and onLoadEnd to update your state and show the ActivityIndicator according to it!
for more info check the: https://github.com/react-native-community/react-native-webview/blob/master/docs/Reference.md#onloadprogress
you can also use your ActivityIndicator wrapped by WebView, *do not Forget this method works in ios for android put it outside of WebView
and this is a working code sample for you:
import React, {useState} from 'react';
import {View, Text, SafeAreaView, ActivityIndicator} from 'react-native';
import {WebView} from 'react-native-webview';
function WebViewTest() {
const [isLoading, setLoading] = useState(false);
return (
<SafeAreaView style={{flex: 1}}>
<WebView
source={{uri: 'https://www.nytimes.com/'}}
onLoadStart={(syntheticEvent) => {
setLoading(true);
}}
onLoadEnd={(syntheticEvent) => {
setLoading(false);
}} />
{isLoading && (
<View style={{flex: 10, backgroundColor: 'white'}}>
<ActivityIndicator
color="#009688"
size="large"
// style={{position: 'absolute', left: 200, top: 300}}
/>
</View>
)}
</SafeAreaView>
);
}
export default WebViewTest;
I hope it helps
I use onLoadProgress to solve this issue.
renderLoading function is just called at the initial loading state of webview component. Using renderLoading is not helpful to show activity indicators at any tap on page links or navigating between webview pages.
Checking onLoadStart and onLoadEnd is useful in android but in iOS onLoadEnd is not called in the back navigation gesture which results in endless spinning of activity indicator.
onLoadProgress returns a number between 0-1 while webview is in the loading state. You check its progress state and update your activity indicator state.
For more information about onLoadProgress: onLoadProgress
Here is a working code example for you:
import React, {useState} from 'react';
import {View, Text, SafeAreaView, ActivityIndicator} from 'react-native';
import {WebView} from 'react-native-webview';
function WebViewTest() {
const [isLoading, setLoading] = useState(false);
return (
<SafeAreaView style={{flex: 1}}>
<WebView
source={{uri: 'https://www.nytimes.com/'}}
onLoadProgress={({nativeEvent}) => {
if (nativeEvent.progress != 1 && isLoading == false ) {
setLoading(true)
} else if (nativeEvent.progress == 1 ) {
setLoading(false)
}
}}
/>
{isLoading && (
<View style={{flex: 10, backgroundColor: 'white'}}>
<ActivityIndicator
color="#009688"
size="large"
// style={{position: 'absolute', left: 200, top: 300}}
/>
</View>
)}
</SafeAreaView>
);
}
export default WebViewTest;
I want to play only a segment of the animation in react native using lottie view
the length is about 5 seconds while in speed={1} I wanna play only the first 3 seconds and then go to the next screen
the code is down below
LogoScreen.js :
import React from 'react';
import { StyleSheet, View, Image, TextInput, StatusBar, Text } from "react-native";
import Icons from 'react-native-vector-icons/Ionicons';
import LottieView from "lottie-react-native";
export default class ChatScreen extends React.Component {
onAnimationFinish = () => {
this.props.navigation.navigate("Login")
}
render () {
return (
<View style={styles.container}>
<StatusBar barStyle="light-content" backgroundColor="#161f3d" />
<View>
<LottieView
source={require('../assets/animations/lottie/MotionCorpse-Jrcanest.json')}
style={{ justifyContent: "center", alignSelf: "center", height: "100%", width: "100%" }}
autoPlay
loop={false}
speed={1}
onAnimationFinish={this.onAnimationFinish}
/>
</View>
</View>
)
}
Well you can do it by several ways, one of the way would be like below.
You can use ref to play it manually and then after 3 seconds just redirect to next screen.
import React from 'react';
import { StyleSheet, View, Image, TextInput, StatusBar, Text } from "react-native";
import Icons from 'react-native-vector-icons/Ionicons';
import LottieView from "lottie-react-native";
export default class ChatScreen extends React.Component {
componentDidMount() {
this.anim.play();
setTimeout(() => {
this.props.navigation.navigate("Login")
}, 3000);
}
render() {
return (
<View style={styles.container}>
<StatusBar barStyle="light-content" backgroundColor="#161f3d" />
<View>
<LottieView
source={require('../assets/animations/lottie/MotionCorpse-Jrcanest.json')}
style={{ justifyContent: "center", alignSelf: "center", height: "100%", width: "100%" }}
autoPlay={false}
loop={false}
speed={1}
ref={animation => { this.anim = animation; }}
/>
</View>
</View>
)
}
}
Another way is if you know exact frame numbers then you can play animation till that frame which completes at 3 seconds. It is already mentioned in Lottie documentation.
this.animation.play(30, 120);
I'm trying to build an app and it was working but for some reason now everytime I try to export something it no longer works (stays greyed out).
I have copy and pasted a page and just change the file name and the export class still stays greyed out.
I have deleted the node folder, cleared the cache, and reinstall the cache. Still won't work
Created a new file in the screen and component folder, copy pasted a working page (screen file to a screen file & component file to component file). The export class still stays greyed out.
example of a button component
import React, { Component } from 'react';
import {View, StyleSheet, Dimensions} from 'react-native';
export default function Timer(props) {
return(
<View style={styles.Button}>
<View>
{ props.children }
</View>
</View>
)
}
const styles = StyleSheet.create({
Button: {
height:31,
width: 87,
borderRadius: 10,
backgroundColor: '#E0F7EF',
display: 'flex',
justifyContent: 'center', /* center items vertically, in this case */
alignItems: 'center', /* center items horizontally, in this case */
},
})
Example of a screen component
import React, {Component} from 'react';
import * as firebase from 'firebase';
import { NavigationActions, StackNavigator } from 'react-navigation';
import{ ImageBackground, Dimensions, View, ScrollView, SafeAreaView, TextInput, Picker } from 'react-native';
import { SimpleLineIcons } from '#expo/vector-icons';
import { Container, Header, Content, Card, CardItem, Body, Text } from 'native-base';
import { MaterialCommunityIcons, FontAwesome, MaterialIcons, Ionicons} from '#expo/vector-icons';
import Strings from '../utils/Strings';
var styles = require('../../assets/files/Styles');
var {height, width} = Dimensions.get('window');
//NAVIGATION AT TOP
export default class Cardio extends Component {
static navigationOptions = {
title: `${Strings.ST201}`,
};
navigateToScreen = (route) => () => {
const navigateAction = NavigationActions.navigate({
routeName: route,
});
this.props.navigation.dispatch(navigateAction);
}
render () {
return (
<Container style={styles.background_general}>
<ScrollView>
<View style={{flexDirection:'column', backgroundColor: '#000000', height: height * 0.25}}>
<ImageBackground
source={require('../../assets/images/header.jpg')}
style={{flex: 1, width: null, height: null}}>
</ImageBackground>
</View>
<View style={styles.cardslayout}>
<TextInput
style={styles.CommentBox}
placeholder = 'sets'
returnKeyType="done"
/>
<TextInput
style={styles.CommentBox}
placeholder = 'Reps'
returnKeyType="done"
/>
</View>
<View>
<TextInput />
</View>
<View style={styles.cardslayout}>
<Content horizontal={true}>
{/*Bike*/}
<Card>
<CardItem style={styles.card}>
<Text>
<MaterialIcons name="directions-bike" size={32} color="white"/>
</Text>
</CardItem>
</Card>
<Card>
<CardItem style={styles.card}>
<Text>
<MaterialCommunityIcons name="run-fast" size={32} color="white"/>
</Text>
</CardItem>
</Card>
<Card>
<CardItem style={styles.card}>
<Text>
<Ionicons name="ios-walk" size={32} color="white"/>
</Text>
</CardItem>
</Card>
</Content>
</View>
{/*END OF CUSTOM INPUT*/}
</ScrollView>
</Container>
)
}
}
This is what I mean by it being grayed out.
This is a custom button file in the component folder.
You can see the export default function working in the custom button file. Now am going to create a test file and copy and paste the same code into it and simply change the function name. Now before I change the function name the "export default function" turns grey but I change the name to reduce confusion here.