React Native swiper not working in StackNavigator for IOS - reactjs

In my app, I have Login Screen, ForgotPassword Screen and SignUp Screen. In SignUp Screen I have used react-native-swiper to displays three step's slides of signup process. And I have wrap-up these screens in StackNavigator and render this StackNavigator as a root component in my App.js.
Here is my StackNavigator :
Router.js
import { createDrawerNavigator, createAppContainer, createStackNavigator } from 'react-navigation';
import Login from './src/containers/Login';
import SignUp from './src/containers/SignUp';
import ForgotPassword from './src/containers/ForgotPassword';
const AuthStackNavigator = createStackNavigator({
Login: {
screen: Login
},
ForgotPassword: {
screen: ForgotPassword
},
SignUp: {
screen: SignUp
},
});
const Router = createAppContainer(AuthStackNavigator)
export default Router
App.js
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import configureStore from './src/store/configureStore';
import Router from './Router';
const store = configureStore()
class App extends Component {
render() {
return (
<Provider store={store}>
<Router />
</Provider>
);
}
}
export default App
SignUp.js
import React, { Component } from 'react';
import { View, StyleSheet, TouchableOpacity, KeyboardAvoidingView, Platform, Dimensions } from 'react-native';
import Swiper from 'react-native-swiper';
import Colors from '../../config/Colors';
import Logo from '../components/Logo';
import MText from '../components/MText';
import StepButton from '../components/StepButton';
import SignUpStepOne from './SignUpStepOne';
import SignUpStepTwo from './SignUpStepTwo';
import SignUpStepThree from './SignUpStepThree';
class SignUp extends Component {
static navigationOptions = ({navigation}) => ({
header: null
});
constructor(props) {
super(props);
this.state = {
activeStep: 0
};
}
slideToNext = () => {
this.swiper.scrollBy(1, true);
this.setState(prevState => ({
activeStep: prevState.activeStep + 1
}))
}
slideToPrev = () => {
this.setState(prevState => ({
activeStep: prevState.activeStep - 1
}), () => {
this.swiper.scrollBy(-1, true);
})
}
render() {
<KeyboardAvoidingView style={styles.container} behavior="padding">
<View style={{ flex: 1, paddingHorizontal: 10 }}>
<Logo />
<Swiper
style={{
}}
ref={(swiper) => { this.swiper = swiper; }}
containerStyle={{ flex: 1 }}
showsButtons={false}
showsPagination={false}
loop={false}
scrollEnabled={false}
onIndexChanged={(activeStep) => {
this.setState({
activeStep
})
}}
>
<SignUpStepOne onNext={this.slideToNext} />
<SignUpStepTwo onNext={this.slideToNext} onPrev={this.slideToPrev} />
<SignUpStepThree onNext={this.slideToNext} onPrev={this.slideToPrev} />
</Swiper>
</View>
</KeyboardAvoidingView>
}
}
But, the problem is that when I navigate from Login screen to SignUp screen using this.props.navigation.navigate('SignUp'), Swiper componen not displaying anything in SignUp screen. It just blank. For android it working properly, For IOS it is not working.
And another thing to note is that If I just render SignUp screen as a root in App.js then it is working properly.
And also If I set SignUp screen as a initial screen in my StackNavigator then also it's working.
Please anyone help me what's going wrong here ?

I Have found the solution.
Add removeClippedSubviews={false} props to swiper. Then It will work.

If Swiper isn't working use these props
removeClippedSubviews={false}
scrollEnabled={true}

Related

react context in another screen

Good evening everyone,
I created two screens and I would like to pass the context to one of this screen but it doesn't work.
Here what I have so far :
App :
import React from 'react';
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import HomeScreen from "./src/screens/HomeScreen";
import ExpenseScreen from "./src/screens/ExpenseScreen";
import BalanceScreen from "./src/screens/BalanceScreen";
import {ExpenseProvider} from "./src/context/ExpenseContext";
const navigator = createStackNavigator(
{
Home:HomeScreen,
Expense:ExpenseScreen,
Balance: BalanceScreen
},
{
initialRouteName:"Home",
defaultNavigationOptions:{
title:"App",
}
}
)
const App = createAppContainer(navigator);
export default () => {
return <ExpenseProvider>
<App/>
</ExpenseProvider>
};
HomeScreen:
import React from "react";
import { Text, StyleSheet, View, Button} from "react-native";
const HomeScreen = ({navigation}) => {
return(
<View>
<Text style={styles.text}>HomeScreen</Text>
{/*Shows default display*/}
<Button
onPress={()=> navigation.navigate('Expense')}
title="Expense Tracker"
/>
<Button
onPress={()=> navigation.navigate('Balance')}
title="Balance"
/>
</View>
)
};
const styles = StyleSheet.create({
text: {
fontSize: 30
}
});
export default HomeScreen;
Provider :
import React from 'react';
const ExpenseContext = React.createContext();
export const ExpenseProvider = ({children}) => {
const expensePosts = [
{title: 'Expense Post #1'},
{title: 'Expense Post #2'},
{title: 'Expense Post #3'}
]
return <ExpenseContext.Provider value={expensePosts}>{children}</ExpenseContext.Provider>
};
export default ExpenseContext;
Screen :
import React, {useContext} from "react";
import { Text, StyleSheet, View, Button, Flatlist } from "react-native";
import ExpenseContext from '../context/ExpenseContext';
const ExpenseScreen = () => {
const expensePosts = useContext(ExpenseContext)
return(
<View>
<Text style={styles.text}>Expense Tracker</Text>
<Flatlist
data={expensePosts}
keyExtractor={(expensePost) => expensePost.title}
renderItem={({item}) => {
return <Text>{item.title}</Text>
}}
/>
</View>
)
};
const styles = StyleSheet.create({
text: {
fontSize: 30
}
});
export default ExpenseScreen;
I am trying to import the context into the "expenseScreen" but it doesn't work.
The error message I have is " element type is invalid: expected a string or a class but got undefined. You likely forgot to export your component from the file it's defined in or you might have mixed up default and name imports. Check the render method of 'ExpenseScreen'".
What am I missing ?
Does the Expenseprovider exported in the App only applies for the 'homeScreen' ?
Thank you very much in advance and hope this is clear enough.

Re-render web-view on bottomTabNavigator

How I can re-render a web-view running inside a app built with react native. For exemple: The cart tab need to load the same url every time I click on it.
This is the cart class:
import React, { useState } from 'react';
import { ActivityIndicator, WebView, View, Button, ScrollView,
RefreshControl,
Text, } from 'react-native';
import Config from '../config';
export default class CarrinhoScreen extends React.Component {
reload() {
this.myWebView.reload()
}
render() {
return (
<>
<View style={{ flex: 1 }}>
<WebView
source={{ uri: 'https://www.genieshopp.com/checkout/cart/' }}
userAgent='bring-app'
startInLoadingState={true}
ref={(ref) => this.myWebView = ref}
/>
</View>
</>
)
}
};
Here is where the tabNavigator is created:
import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
import CarrinhoScreen from '../screens/CarrinhoScreen';
const config = Platform.select({
web: { headerMode: 'screen' },
default: {},
});
const CarrinhoStack = createStackNavigator(
{
Carrinho: CarrinhoScreen
},
config
);
CarrinhoStack.navigationOptions = {
tabBarLabel: 'Carrinho',
tabBarIcon: ({ focused }) => (
<TabBarIcon focused={focused} name={Platform.OS === 'ios' ? 'ios-cart' : 'md-cart'}/>
),
};
CarrinhoStack.path = '';
const tabNavigator = createBottomTabNavigator(
{
CarrinhoStack,
},
{
backBehavior: 'history'
}
);
tabNavigator.path = '';
export default tabNavigator;
I know there is the myWebView.reload(), but I want to know how I reload it when the bottom tab is switched or when I click on the same icon.
Solved by putting resetOnBlur: CarrinhoScreen after backBehavior: history
You can put any other screen you want to reset on there.

React Navigation + Native Base => props.navigation.navigate is not a function

I'm trying to style my TabNavigator using Native Base, but I always get "props.navigation.navigate is not a function" and I have no idea why.
This is my TabNavigator:
import { createBottomTabNavigator } from 'react-navigation';
import React from 'react';
import { Button, Text, Icon, Footer, FooterTab } from 'native-base';
import CameraRouter from './CameraRouter';
import Feed from '../components/Feed';
const MainRouter = createBottomTabNavigator(
{
Feed: {
screen: Feed,
},
Camera: {
screen: CameraRouter,
navigationOptions: {
tabBarVisible: false,
},
},
},
{
tabBarComponent: props => {
return (
<Footer>
<FooterTab>
<Button
vertical
onPress={() => props.navigation.navigate('Feed')}
>
<Icon name="bowtie" />
<Text>Lucy</Text>
</Button>
<Button
vertical
onPress={() => props.navigation.navigate('CameraRouter')}
>
<Icon name="briefcase" />
<Text>Nine</Text>
</Button>
<Button
vertical
>
<Icon name="headset" />
<Text>Jade</Text>
</Button>
</FooterTab>
</Footer>
);
}
}
);
export default MainRouter;
Which I call here:
import React, { Component } from 'react';
import { YellowBox } from 'react-native';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import MainRouter from './config/MainRouter';
import reducers from './reducers';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
class App extends Component {
render() {
const store = createStore(reducers);
return (
<Provider store={store}>
<MainRouter />
</Provider>
);
}
}
export default App;
What is wrong with my code? I used this guide to get an idea of the usage:
http://docs.nativebase.io/docs/examples/navigation/StackNavigationExample.html
Thank you guys!
if want to implement with react-navigation 3.0 with native-base 2.13 then below code will work.
import { createBottomTabNavigator,createStackNavigator,createAppContainer } from 'react-navigation';
import React from 'react';
import { Button, Text, Icon, Footer, FooterTab } from 'native-base';
import Home from './containers/Home';
import CreateCase from './containers/CreateCase';
import Profile from './containers/Profile';
import Performance from './containers/Performance';
const MainNavigator = createStackNavigator(
{
Home : {
screen: Home,
navigationOptions: {
header: null,
}
},
Create: {
screen: CreateCase,
navigationOptions: {
title: "Generate Case",
}
},
},
{
initialRouteName: "Home"
}
);
const Main = createBottomTabNavigator({
Home: { screen: MainNavigator },
Profile: { screen: Profile },
Performance: {screen: Performance}
},
{
tabBarComponent: props => {
return (
<Footer>
<FooterTab>
<Button
vertical
onPress={() => props.navigation.navigate('Home')}
>
<Icon name="bowtie" />
<Text>Lucy</Text>
</Button>
<Button
vertical
onPress={() => props.navigation.navigate('Profile')}
>
<Icon name="briefcase" />
<Text>Nine</Text>
</Button>
<Button
vertical
>
<Icon name="headset" />
<Text>Jade</Text>
</Button>
</FooterTab>
</Footer>
);
}
}
);
export default createAppContainer(Main);
https://reactnavigation.org/docs/en/navigation-prop.html
This doc mentions that navigation props is not available to every component by default only the screen components have it.
if you wish to access this prop in other components then you either pass this prop to the component where it is needed or you use what is called 'withNavigation'
I think the props aren't being passed through from your App component, could you try this?
class App extends Component {
render() {
const store = createStore(reducers);
return (
<Provider store={store}>
<MainRouter {...props}/>
</Provider>
);
}
}
export default App;
I found the solution to my problem: I had to add a root StackNavigator

Passing Props for button on press event

I created a drawer (react-navigation) in Routes.js and I have a Button in HamburgerBtn.js. I wish to invoke the call on the button to open the drawer with my button. I do not understand how to get this even from outside of routes into the button.
#HamburgerBtn.js;import Hamburger from 'react-native-hamburger';
import React, {Component} from 'react';
import styles from './Component.style';
import {
Text,
View
} from 'react-native';
import {DrawerNavigator} from 'react-navigation';
import {NavigationActions} from 'react-navigation';
class HamburgerBtn extends Component {
constructor(props){
super(props);
this.state = {
active: false,
}
}
openControlPanel = () => {
this.props.navigation.navigate('DrawerOpen'); // open drawer
};
render () {
//onPress={()=> {this.setState({active: !this.state.active});this.props.navigation.navigate('DrawerOpen');}}/>
return (
<View style={styles.hamburgerBtnHome}>
<Hamburger active={this.state.active}
type = "arrow"
color = "black"
onPress={()=> {this.props.openControlPanel()}}
/>
</View>
);
}
}
export default HamburgerBtn;
--routes.js--
import Connect from './Connect/Connect';
import Setup from './Setup/Setup';
import Update from './Update/Update';
import homePage from './homePage'
import SideMenu from './SideMenu/SideMenu';
import {DrawerNavigator} from 'react-navigation';
openControlPanel = () => {
this.props.navigation.navigate('DrawerOpen'); // open drawer
};
export default DrawerNavigator({
homePage: {
screen: homePage
},
Connect: {
screen: Connect
},
Setup: {
screen: Setup
},
Update: {
screen: Update
}
}, {
contentComponent: SideMenu,
drawerWidth: 300
});
--homepage.js--
import React, {Component} from 'react';
import {
Text,
View
} from 'react-native';
import Hamburger from './Components/HamburgerBtn';
class homePage extends Component {
render () {
return (
<View style={{padding: 50}}>
<Hamburger/>
<Text>
HomePage
</Text>
</View>
);
}
}
export default homePage;
--hamburger--
import Hamburger from 'react-native-hamburger';
import React, {Component} from 'react';
import styles from './Component.style';
import {
Text,
View
} from 'react-native';
import PropTypes from 'prop-types';
import {NavigationActions} from 'react-navigation';
class HamburgerBtn extends Component {
constructor(props){
super(props);
this.state = {
active: false,
}
}
onPress = () => {
this.setState({active: !this.state.active});
this.props.onPress();
};
render () {
//onPress={()=> {this.setState({active: !this.state.active});this.props.navigation.navigate('DrawerOpen');}}/>
return (
<View style={styles.hamburgerBtnHome}>
<Hamburger active={this.state.active}
type = "arrow"
color = "black"
onPress={() => this.onPress()}
/>
</View>
);
}
}
export default HamburgerBtn;
--homepage--
import React, {Component} from 'react';
import {
Text,
View
} from 'react-native';
import Hamburger from './Components/HamburgerBtn';
class homePage extends Component {
openControlPanel = () => {
this.props.navigation.navigate('DrawerOpen'); // open drawer
};
render () {
return (
<View style={{padding: 50}}>
<Hamburger onPress={() => this.openControlPanel()} />
<Text>
HomePage
</Text>
</View>
);
}
}
export default homePage;

React-Navigation is not working need perfect solution

I'm using React-Navigation with create react native app with expo sdk.
This is my my app.js page code:
import React from 'react';
import Expo from 'expo';
import { StyleSheet, Text, View } from 'react-native';
import { TabNavigator } from 'react-navigation';
import Home from './Components/Home';
import Settings from './Components/Settings';
class App extends React.Component {
render() {
const MainNavigation = TabNavigator({
Home: { screen: Home },
Settings: { screen: Settings },
});
return (
<View>
<MainNavigation />
</View>
);
}
}
export default App;
In app page i'm exporting two components name home and settings page
Home.js page code:
import React from 'react';
import { StyleSheet, View, Text, Platform } from'react-native';
class Home extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
title: 'Home',
headerStyle: {
marginTop: Platform.OS === 'android' ? 24 : 0
}
};
};
render () {
return (
<View>
<Text> Home Page </Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
export default Home;
and Setting.js page code is:
import React from 'react';
import { View, Text, Platform } from'react-native';
class Settings extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
title: 'Settings',
headerStyle: {
marginTop: Platform.OS === 'android' ? 24 : 0
}
};
};
render () {
return (
<View>
<Text> Settings Page </Text>
</View>
);
}
}
export default Settings;
My problem is that i'm trying to use tab navigator on my app with this two pages named Home.js and Settings.js
But it is not working and after expo sdk load its open with blank page (even no error returning)! Can anyone tell me what is my mistake on this codes or what is the issue that tab navigator is not coming or showing or working!!!!

Resources