Cannot read property `navigation` of undefined - react-native

The following code all works except for when I click on the last SettingsList.Item component inside of the SettingsRoute. The error I get is "Cannot read property navigation of undefined".
import React from "react";
import {
View,
TextInput,
Alert,
KeyboardAvoidingView,
Dimensions,
AsyncStorage,
ActivityIndicator,
BackHandler
} from "react-native";
import { withNavigation } from "react-navigation";
import PTRView from "react-native-pull-to-refresh";
import SettingsList from "react-native-settings-list";
import { Text, Toast, Root } from "native-base";
import {
BottomNavigation,
Surface,
Button,
List,
Headline,
Switch,
Divider,
Paragraph,
Dialog,
Portal
} from "react-native-paper";
import { Home } from "../components/";
let width = Dimensions.get("window").width;
let height = Dimensions.get("window").height;
const HomeRoute = () => (
<PTRView onRefresh={() => this.refresh}>
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Logged in:</Text>
<Card name="Hello World" color="#d50000" letterGrade="ABC" grade="123" />
</View>
</PTRView>
);
const Card = props => (
<Surface
style={{
margin: 4,
padding: 8,
backgroundColor: props.color,
elevation: 3,
justifyContent: "center",
width: width - 21,
height: height / 9
}}
>
<Text
style={{
textAlign: "right",
alignSelf: "stretch",
color: "white",
fontSize: responsiveFontSize(2.2)
}}
>
{props.grade}
</Text>
<Text
style={{
textAlign: "left",
color: "white",
fontSize: responsiveFontSize(2.6)
}}
>
{props.name}
</Text>
<Text
style={{
textAlign: "right",
alignSelf: "stretch",
color: "white",
fontSize: responsiveFontSize(2.3)
}}
>
{props.letterGrade}
</Text>
</Surface>
);
const SettingsRoute = () => (
<View style={{ flex: 1, width: width - 9, justifyContent: "center" }}>
<SettingsList backgroundColor="transparent">
<SettingsList.Header
headerText="Settings"
headerStyle={{ color: "black" }}
/>
<SettingsList.Item
itemWidth={50}
title="About/Credits"
onPress={() => Alert.alert("Test")}
/>
<SettingsList.Item
itemWidth={50}
title="Help"
onPress={() => Alert.alert("TEST")}
/>
<SettingsList.Item
itemWidth={50}
title="Logout"
onPress={() => this.props.navigation.navigate("chooseDistrict")}
/>
</SettingsList>
</View>
);
const responsiveFontSize = f => {
return Math.sqrt(height * height + width * width) * (f / 100);
};
export class Grades extends React.Component {
static navigationOptions = {
title: "Grades",
headerLeft: null,
gesturesEnabled: false
};
constructor() {
super();
this.state = {
index: 0,
isAuthed: false,
routes: [
{ key: "home", title: "Home", icon: "home"},
{
key: "settings",
title: "Settings",
icon: "settings",
}
],
visible: false
};
}
_handleIndexChange = index => this.setState({ index });
_renderScene = BottomNavigation.SceneMap({
home: HomeRoute,
settings: SettingsRoute
});
refresh() {
//get grades and repopulate tabs
//refresh
this.setState({ isAuthed: true });
}
componentWillMount() {
BackHandler.addEventListener("hardwareBackPress", function() {
return true;
});
}
pleaseLogout() {
this.props.navigation.navigate("login");
}
render() {
return (
<Root>
<BottomNavigation
styles={{ backgroundcolor: "#8499B1" }}
navigationState={this.state}
onIndexChange={this._handleIndexChange}
renderScene={this._renderScene}
/>
</Root>
);
}
}
export default withNavigation(Grades);
Do I need to pass props into the function?
Am I even defining my variables in the right place?
Thanks in advance

I made a very silly typo.
onPress={() => this.props.navigation.navigate("login")} <- this does not work (login is not capitalized)
onPress={() => this.props.navigation.navigate("Login")} <- this works!

Related

Unable to Pass the data to API using react-native-element-dropdown

How to pass the data to API?
//Parent Componet - in updateval function, i m trying get the selected values from dropdown but i am not getting to know how to get that.
import ElementDropdown from '../Components/ElementDropdown';
class ScanScreen extends Component {
constructor(props) {
super(props);
}
updatedVal=(item,value)=>{
console.log("hgfgf",item,value);
}
render() {
return (
<ElementDropdown text={'Country'} label={['Germany','India']} updatedVal={this.updatedVal}/>
<ElementDropdown text={'Store'} label={['Dusseldolf','Bangalore']} updatedVal={this.updatedVal}/>
)
}
}
export default ScanScreen;
//Child component - I m trying to send selected values from dropdown list to parent in updatedval.
import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Dropdown } from 'react-native-element-dropdown';
import BPText from './BPText';
import ThemeColors from '../themes/bp-themes/variables/themeColors';
const ElementDropdown = (props) => {
const { text, label,updatedVal } = props;
const [value, setValue] = useState(null);
const [isFocus, setIsFocus] = useState(false);
const data = [
{ label: label[0], value: "id1" },
{ label: label[1], value: "id2" },
];
return (
<View style={styles.container}>
<View style={styles.textContainer}>
<BPText type="Light" style={{ color: ThemeColors.themeColorYellow }}>
{text}
</BPText>
</View>
<View style={styles.dropContainer}>
<Dropdown
style={[styles.dropdown, isFocus && { borderColor: 'blue' }]}
selectedTextStyle={styles.selectedTextStyle}
iconStyle={styles.iconStyle}
placeholderStyle={styles.placeholderStyle}
data={data}
maxHeight={300}
labelField="label"
valueField="value"
item
placeholder={label[0]}
value={value}
onFocus={() => setIsFocus(true)}
onBlur={() => setIsFocus(false)}
onChange={item => {
setValue(item.value);
setIsFocus(false);
//setIsDefalut(false);
updatedVal(item,label[0],label[1]);
}}
/>
</View>
</View>
);
};
export default ElementDropdown;
const styles = StyleSheet.create({
container: {
borderBottomWidth: 0.5,
borderBottomColor: 'white',
flexDirection: 'row',
marginLeft: 40,
marginRight: 40,
marginTop: 10,
justifyContent: 'center',
alignItems: 'center',
},
textContainer:{
flex:1
},
dropContainer: {
flex: 2,
},
dropdown: {},
icon: {
marginRight: 5,
},
selectedTextStyle: {
color: 'white',
},
iconStyle: {
width: 20,
height: 20,
tintColor: 'white'
},
placeholderStyle:{
color:'white'
}
});

how to search item in listed element react native

I am stuck with a problem, when am trying to search elements from listed data it's not working, I seem lots of document ad I applied it, but still, its work for me, can anyone help me.
if you have any questions please free feel to ask any time.
home.js
This is Home.js file where I wrote my all code. and here I use some React native paper components.
import React, { useEffect, useState } from 'react'
import { Text, View, FlatList, StyleSheet, ScrollView, TouchableOpacity } from 'react-native';
import { Avatar } from 'react-native-elements';
import { Searchbar, Provider, Portal, TextInput, Button } from 'react-native-paper';
import { AntDesign, Entypo } from '#expo/vector-icons';
import Modal from "react-native-modal";
export default function Home() {
const [searchquery, setSearchquery] = React.useState();
const [isModalVisible, setModalVisible] = useState(false);
const [name, setName] = React.useState('');
const [number, setNumber] = React.useState('');
const toggleModal = () => {
setModalVisible(!isModalVisible);
};
const filterItem = (text) => {
users.filter((item) => {
return item.name.toLowerCase().inludes(text.toLowerCase())
})
setSearchquery(text)
}
const [users, setUser] = useState([
{
id: 1,
name: "Ashish Nirvikar",
number: 3289768909,
},
{
id: 2,
name: "Drew Macntyre",
number: 3345661276
},
{
id: 3,
name: "Jonh Cena",
number: 9087392878
},
{
id: 4,
name: "Rock Samoa",
number: 9723780928
},
{
id: 5,
name: "Boby Lashely",
number: 8769213678
},
{
id: 6,
name: "Seth Rollins",
number: 6890326741
},
])
return (
<View >
<Searchbar
placeholder="Search Contacts"
onChangeText={(text) => setSearchquery(text)}
value={searchquery}
style={{ marginTop: 30, marginHorizontal: 10 }}
/>
<ScrollView>
{
filterItem(users).map((item, index) => {
return (
<View key={index} style={styles.names}>
<Text style={{ color: 'black', fontSize: 20, fontWeight: 'bold' }}>Name : {item.name}</Text>
<Text style={{ color: 'black' }}>Mobile no : {item.number}</Text>
</View>
)
})
}
</ScrollView>
<Modal isVisible={isModalVisible} style={{ backgroundColor: 'white', height: 50, marginBottom: 200, marginTop: 100 }}>
<View style={{ flex: 2 }}>
<Text style={{ color: 'black', fontSize: 50, textAlign: 'center' }}>Add Contact</Text>
<TextInput
style={styles.input}
label="Enter Full name"
value={name}
onChangeText={text => setName(text)}
/>
<TextInput
style={styles.input1}
label="Enter Mobile Number"
value={number}
onChangeText={text => setNumber(text)}
/>
<Button title="Hide modal" onPress={toggleModal} style={{ color: 'black', backgroundColor: 'white', borderWidth: 1, borderColor: 'gray', marginHorizontal: 10, marginTop: 15 }}>Cancle</Button>
</View>
</Modal>
<AntDesign name="plus" size={34} color="black" style={styles.plus} onPress={toggleModal} />
</View>
);
}
const styles = StyleSheet.create({
customText: {
padding: 10,
marginTop: 20,
textAlign: 'center',
backgroundColor: 'lightgray',
fontWeight: 'bold',
fontSize: 20
},
plus: {
fontSize: 50,
position: 'absolute',
top: 680,
right: 40,
backgroundColor: 'pink',
borderRadius: 15,
borderWidth: 0.5,
padding: 5,
},
names: {
padding: 15,
fontSize: 25,
fontWeight: 'bold',
backgroundColor: 'lightgray',
marginTop: 10,
borderRadius: 20,
color: 'black'
},
addcontactname: {
fontSize: 30,
textAlign: 'center',
marginTop: 10,
marginBottom: 30
},
input: {
marginHorizontal: 10,
marginBottom: 20,
marginTop: 20
},
input1: {
marginHorizontal: 10,
marginBottom: 10,
}
});
Your Searchbar should be a controlled input (call setSearchquery with the change value from the Searchbar).
Then you can use the value of searchquery to perform the filtering inline in your jsx.
Finally, use FlatList to render a list of items instead of a map inside a ScrollView.
In your example, there's no need for the list of users to be stored in state.
import React, { Component } from 'react';
import { Text, View, StyleSheet, ScrollView, FlatList } from 'react-native';
import { Searchbar } from 'react-native-paper';
const data = [...];
export default class Home extends Component {
constructor(props) {
super(props);
this.state = {
searchquery: '',
};
}
renderHeader = () => {
return (
<Searchbar
placeholder="Search Contacts"
onChangeText={(searchquery) =>
this.setState({
searchquery,
})
}
value={this.state.searchquery}
/>
);
};
renderItem = ({ item, index }) => {
return (
<View key={index} style={styles.names}>
<Text>
Name : {item.name}
</Text>
<Text>Mobile no : {item.number}</Text>
</View>
);
};
render() {
return (
<FlatList
data={data.filter((item) => {
if (!this.state.searchquery) return true
return item.name
.toUpperCase()
.includes(this.state.searchquery.toUpperCase());
})}
ListHeaderComponent={this.renderHeader}
renderItem={this.renderItem}
/>
);
}
}
Snack
you can try with this code if it will not work then call filterItem function with bracket and parameter also my code is working while the name is lowercase.
<Searchbar
placeholder="Search Contacts"
onChangeText={filterItem}
onClear={(users) => setUser('')}
value={searchquery}
style={{ marginTop: 30, marginHorizontal: 10 }}
/>
const filterItem = (text) => {
setSearchquery(text)
let searchText = text.toLowerCase()
let filterData = users
filterData = filterData.filter(function (id) {
return id.name.toLowerCase().includes(searchText)
})
setUser(filterData);
if (text === "") {
setUser(
[
{
id: 1,
name: "Ashish Nirvikar",
number: 3289768909,
},
{
id: 2,
name: "Drew Macntyre",
number: 3345661276
},
{
id: 3,
name: "Jonh Cena",
number: 9087392878
},
{
id: 4,
name: "Rock Samoa",
number: 9723780928
},
{
id: 5,
name: "Boby Lashely",
number: 8769213678
},
{
id: 6,
name: "Seth Rollins",
number: 6890326741
},
]
);
}
}
Try this
const filterItem = (searchItems) => {
searchItems.filter((item) => {
return item.name.toLowerCase().inludes(searchquery.toLowerCase())
})
}
<Searchbar
placeholder="Search Contacts"
onChangeText={(text) => setSearchquery(text)}
onClear={(text) => searchquery("")}
value={searchquery}
style={{ marginTop: 30, marginHorizontal: 10 }}
/>
<ScrollView>
{
filterItem(users).map((item, index) => {
return (
<View key={index} style={styles.names}>
<Text style={{ color: 'black', fontSize: 20, fontWeight: 'bold' }}>Name : {item.name}</Text>
<Text style={{ color: 'black' }}>Mobile no : {item.number}</Text>
</View>
)
})
}
</ScrollView>

how to get current flat list item data in reactnative using react-native-swipe-list-view

I'm not getting how to get the current item object of a flat list
I used react-native-swipeout and react-native-swipe-list-view and in both examples I stuck.
And on google I found very big answers. Which are not pointing only the particular issue which confused me a lot.
the below is the deleted function when I used react-native-swipeout plugin
const swipeSettings = {
left: [
{
text: 'Delete',
onPress: () => {
console.log('-----delete-----');
},
type: 'delete',
},
}
All I need is to get the current item object data like below inside onpress() when i tapped the delete button .
{
id: 1,
prodName : "abcdefg",
}
That's all, I came from native script background and in that framework I never faced such issue. Because the documentation was crystal clear. But here In react native everything seems to be complicated for me.
Kindly any one help me.
<FlatList
data={data}
keyExtractor={(item) => item.id}
renderItem={({item, index}) => (
<Swipeout {...swipeSettings}>
<View style={styles.listView}>
<Text style={styles.listViewText}>{item.prodName}</Text>
</View>
</Swipeout>
)}
/>
entire page
import React, {useState} from 'react';
import {View} from 'react-native-animatable';
import {
TextInput,
TouchableOpacity,
FlatList,
} from 'react-native-gesture-handler';
import Icon from 'react-native-vector-icons/FontAwesome';
import {StyleSheet, Pressable, Text, Button} from 'react-native';
import * as Animatable from 'react-native-animatable';
import Swipeout from 'react-native-swipeout';
import ButtonPressable from '../../components/ButtonPressable';
var sqlite_wrapper = require('./sqliteWrapper');
const DATA = [
{
prodName: 'Added data will look like this',
},
];
const swipeSettings = {
style: {
marginBottom: 10,
},
autoClose: false,
backgroundColor: 'transparent',
close: false,
disabled: false,
onClose: (sectionID, rowId, direction) => {
console.log('---onclose--');
},
onOpen: (sectionID, rowId, direction) => {
console.log('---onopen--');
},
right: [
{
backgroundColor: 'dodgerblue',
color: 'white',
text: 'Edit',
onPress: () => {
console.log('-----edit-----');
},
},
],
left: [
{
backgroundColor: 'red',
color: 'white',
text: 'Delete',
onPress: () => {
console.log('-----delete-----');
sqlite_wrapper.deleteById
},
type: 'delete',
// component : (<ButtonPressable text="delete" />)
},
],
// buttonWidth: 100,
};
const AddProductList = ({route, navigation}) => {
const {navData} = route.params;
const [prodName, setProdName] = useState('');
var [data, setData] = useState(DATA);
return (
<View style={styles.container}>
<Animatable.View
animation="bounceIn"
duration={1000}
style={styles.inputFieldView}>
<TextInput
style={styles.textInput}
onChangeText={(value) => setProdName(value)}
placeholder="Add the Product"
defaultValue={prodName}
/>
<TouchableOpacity
style={styles.addView}
onPress={() => {
sqlite_wrapper
.insert({prodName: prodName}, sqlite_wrapper.collection_product)
.then((result) => {
console.log('---result---');
console.log(result);
if (result.rowsAffected) {
fetchAllData();
}
});
function fetchAllData() {
sqlite_wrapper
.readAll(sqlite_wrapper.collection_product)
.then((resultData) => {
console.log('---resultData---');
console.log(resultData);
setData(resultData);
setProdName('');
});
}
// without sql this is how to update the state having a array
// const updatedArray = [...data];
// updatedArray.push({prodName: prodName});
// setData(updatedArray);
// setProdName('');
}}>
<Icon name="plus" size={16} style={styles.add} color="white" />
</TouchableOpacity>
</Animatable.View>
<Animatable.View
animation="bounceInLeft"
duration={1500}
style={{flex: 1}}>
<FlatList
data={data}
keyExtractor={(item) => item.id}
renderItem={({item, index}) => (
<Swipeout {...swipeSettings}>
<View style={styles.listView}>
<Text style={styles.listViewText}>{item.prodName}</Text>
</View>
</Swipeout>
)}
/>
</Animatable.View>
</View>
);
};
var styles = StyleSheet.create({
container: {
flex: 1,
},
inputFieldView: {
flexDirection: 'row',
alignItems: 'center',
alignSelf: 'stretch',
margin: 10,
},
textInput: {
flex: 1,
backgroundColor: '#b2ebf2',
borderTopLeftRadius: 7,
borderBottomLeftRadius: 7,
fontSize: 16,
},
addView: {
backgroundColor: '#0f4c75',
alignSelf: 'stretch',
alignItems: 'center',
justifyContent: 'center',
borderTopEndRadius: 7,
borderBottomEndRadius: 7,
padding: 9,
},
add: {
padding: 7,
},
listView: {
padding: 20,
backgroundColor: 'green',
margin: 0,
borderRadius: 0,
},
listViewText: {
color: 'white',
},
});
export default AddProductList;
So if I get you right you have one generic swipe setting that you want to adjust to each element in the list.
Try changing the renderItem of the Flatlist like this and let me know how it worked for you:
<FlatList
data={data}
keyExtractor={(item) => item.id}
renderItem={({ item, index }) => {
let right = [...swipeSettings.right]; <---- ADDED
let left = [...swipeSettings.left]; <---- ADDED
right[0].onPress = () => console.log('edit', item.prodName); <---- ADDED
left[0].onPress = () => console.log('delete', item.prodName); <---- ADDED
<Swipeout {...swipeSettings} {...{ right, left}} > <---- CHANGED
<View style={styles.listView}>
<Text style={styles.listViewText}>{item.prodName}</Text>
</View>
</Swipeout>
}}
/>
So what I have done here is sending the generic swipe settings to each instance of Swipeout but changed their "Left" and "Right" in order to overwrite their "onPress" function and adjust it to the rendered item.
I know it is hard to understand it like this and it's probably not the best explanation but I hope it will help you somehow.
EDIT
import React, { useState } from 'react';
import { View } from 'react-native-animatable';
import {
TextInput,
TouchableOpacity,
FlatList,
} from 'react-native-gesture-handler';
import Icon from 'react-native-vector-icons/FontAwesome';
import { StyleSheet, Pressable, Text, Button } from 'react-native';
import * as Animatable from 'react-native-animatable';
import Swipeout from 'react-native-swipeout';
import ButtonPressable from '../../components/ButtonPressable';
var sqlite_wrapper = require('./sqliteWrapper');
const DATA = [
{
prodName: 'Added data will look like this',
},
];
const AddProductList = ({ route, navigation }) => {
const { navData } = route.params;
const [prodName, setProdName] = useState('');
var [data, setData] = useState(DATA);
const renderItem = ({ item, index }) => {
const swipeSettings = {
style: {
marginBottom: 10,
},
autoClose: false,
backgroundColor: 'transparent',
close: false,
disabled: false,
onClose: (sectionID, rowId, direction) => {
console.log('---onclose--');
},
onOpen: (sectionID, rowId, direction) => {
console.log('---onopen--');
},
right: [
{
backgroundColor: 'dodgerblue',
color: 'white',
text: 'Edit',
onPress: () => console.log('-----edit-----', item.prodName)
},
],
left: [
{
backgroundColor: 'red',
color: 'white',
text: 'Delete',
onPress: () => {
console.log('-----delete-----', item.prodName);
sqlite_wrapper.deleteById
},
type: 'delete',
// component : (<ButtonPressable text="delete" />)
},
],
// buttonWidth: 100,
};
return (
<Swipeout {...swipeSettings}>
<View style={styles.listView}>
<Text style={styles.listViewText}>{item.prodName}</Text>
</View>
</Swipeout>
)
}
return (
<View style={styles.container}>
<Animatable.View
animation="bounceIn"
duration={1000}
style={styles.inputFieldView}>
<TextInput
style={styles.textInput}
onChangeText={(value) => setProdName(value)}
placeholder="Add the Product"
defaultValue={prodName}
/>
<TouchableOpacity
style={styles.addView}
onPress={() => {
sqlite_wrapper
.insert({ prodName: prodName }, sqlite_wrapper.collection_product)
.then((result) => {
console.log('---result---');
console.log(result);
if (result.rowsAffected) {
fetchAllData();
}
});
function fetchAllData() {
sqlite_wrapper
.readAll(sqlite_wrapper.collection_product)
.then((resultData) => {
console.log('---resultData---');
console.log(resultData);
setData(resultData);
setProdName('');
});
}
// without sql this is how to update the state having a array
// const updatedArray = [...data];
// updatedArray.push({prodName: prodName});
// setData(updatedArray);
// setProdName('');
}}>
<Icon name="plus" size={16} style={styles.add} color="white" />
</TouchableOpacity>
</Animatable.View>
<Animatable.View
animation="bounceInLeft"
duration={1500}
style={{ flex: 1 }}>
<FlatList
data={data}
keyExtractor={(item) => item.id}
renderItem={renderItem}
/>
</Animatable.View>
</View>
);
};
var styles = StyleSheet.create({
container: {
flex: 1,
},
inputFieldView: {
flexDirection: 'row',
alignItems: 'center',
alignSelf: 'stretch',
margin: 10,
},
textInput: {
flex: 1,
backgroundColor: '#b2ebf2',
borderTopLeftRadius: 7,
borderBottomLeftRadius: 7,
fontSize: 16,
},
addView: {
backgroundColor: '#0f4c75',
alignSelf: 'stretch',
alignItems: 'center',
justifyContent: 'center',
borderTopEndRadius: 7,
borderBottomEndRadius: 7,
padding: 9,
},
add: {
padding: 7,
},
listView: {
padding: 20,
backgroundColor: 'green',
margin: 0,
borderRadius: 0,
},
listViewText: {
color: 'white',
},
});
export default AddProductList;

React Navigation 4.x version issue when navigating to other screen

When Using react-navigation version 4.1.1
When navigating from one screen to another screen it is fluctuating and i am using ImageBackground there ,so first white blank screen appears after that imagebackground is loading which is very slow and i can easily see the transition over there .
I dont know what's the exact issue is there.
And for this new version i have to install libraries also for react navigation i.e.react-native screens,animated and maskedView ,safeareacontext.
So please any one know about this please let me know ..
Thanks in advance .
Here is a video for my app where i am getting image loading issue...
https://drive.google.com/open?id=16bdmxOC342uCQl3UL_hB8K0wznpbedge
Here is my APP.js File where i have created stack navigator..
import React, { Component } from 'react';
import { createAppContainer } from "react-navigation"
import { createStackNavigator } from 'react-navigation-stack';
import WelcomeScreen from './Screens/WelcomeScreen';
import Walkthorugh from './Screens/Walkthrough';
import Login from './Screens/Login';
import Signup from './Screens/Signup';
import Profile from './Screens/Profile';
import Wishlist from './Screens/Wishlish';
import Home from './Screens/Home';
import Cart from './Screens/Cart';
const notificationsel = require('./Screens/icons/notificationsel.png');
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { enableScreens } from 'react-native-screens';
import { useScreens } from 'react-native-screens';
import {
StyleSheet,
Easing,
View, Animated, FlatList,
Text, Image, Alert, YellowBox, Button, ImageBackground,
TouchableWithoutFeedback, TouchableOpacity
} from 'react-native';
const welcomeStack = createStackNavigator({
Welcome:{screen:WelcomeScreen
},
});
const homeStack = createStackNavigator({
Home:{screen:Home
},
});
const profileStack = createStackNavigator({
Profile:{screen:Profile,
navigationOptions:{header:null}},
});
const cartStack = createStackNavigator({
Cart:{screen:Cart,
navigationOptions:{header:null}},
});
const wishlistStack = createStackNavigator({
Wishlist:{screen:Wishlist,
navigationOptions:{header:null}},
});
const HomeTabNavigator = createBottomTabNavigator({
Home : homeStack,
Profile : profileStack,
Cart : cartStack,
Wishlist : wishlistStack,
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarOnPress: ({ navigation, defaultHandler }) => {
console.log('onPress:', navigation.state.routeName);
// if(navigation.state.routeName=='CallNow'){
// Linking.openURL(`tel:${'9414036555'}`)
// console.log("CallNow")
// }
defaultHandler()
},
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === 'Home') {
iconName = focused ? notificationsel : notificationsel;
}
else if (routeName === 'Profile') {
iconName = focused ? notificationsel : notificationsel;
}
else if (routeName === 'Cart') {
iconName = focused ? notificationsel : notificationsel;
}
else if (routeName === 'Wishlist') {
iconName = focused ? notificationsel : notificationsel;
}
// You can return any component that you like here!
return <Image source={iconName} style={{width:22,height:22}}/>
;
},
}),
tabBarOptions:{
activeTintColor: 'blue',
inactiveTintColor: '#000',
showLabel:true,
style:{backgroundColor:'#fff',padding:5}
},
}
);
const AppNavigator = createStackNavigator(
{
Home: {
screen: HomeTabNavigator,
// navigationOptions:{header:null}
},
Walkthorugh:{
screen:Walkthorugh,
// navigationOptions:{header:null}
},
Welcome:{
screen:WelcomeScreen,
// navigationOptions:{header:null}
},
Login:{
screen:Login,
},
Signup:{
screen:Signup,
// navigationOptions:{header:null}
},
},
{
headerMode:'none',
initialRouteName: "Walkthorugh",
cardStyle: {backgroundColor: "transparent", opacity: 1 },
defaultNavigationOptions: {
gesturesEnabled: false,
cardStyle: {backgroundColor: "transparent", opacity: 1 },
swipeEnabled: false,
animationEnabled: false,
},
}
);
const AppContainer = createAppContainer(AppNavigator);
export default class App extends Component {
render() {
return (
<AppContainer />
)
}
}
And this is my Login.js ..
import React, { Component } from 'react';
import {
StyleSheet,
Platform,
View, ActivityIndicator, FlatList,
Text, Image, Dimensions, Keyboard, TextInput, ImageBackground,
StatusBar, TouchableOpacity
} from 'react-native';
import { NavigationActions, StackActions } from 'react-navigation';
const { width, height } = Dimensions.get('window');
const app_icon = require('./icons/app_icon.png')
const loginbg = require('./icons/loginbg.jpg')
const fashionbot = require('./icons/fashionbot.png')
import { Api_const, App_colors } from './Const/Const.js';
import { ScrollView } from 'react-native-gesture-handler';
import LinearGradient from 'react-native-linear-gradient';
export default class Login extends Component {
static navigationOptions = {
headerTitle: 'Login',
// headerLeft: (
// <View style={{ flexDirection: "row", marginLeft: 20, marginRight: 20 }}>
// <TouchableWithoutFeedback>
// <Image source={require('../assets/Hamburger.png')} >
// </Image>
// </TouchableWithoutFeedback>
// </View>
// ),
headerStyle: { borderBottomWidth: 0, marginTop: (Platform.OS === 'ios') ? 0 : 0 },
headerBackTitle: " "
};
constructor(props) {
super(props);
this.state = {
isLoading: false,
email: '',
password: '',
}
}
onClick_Login = () => {
var action = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: 'Home',params:{test:'test'} })]
});
this.props.navigation.dispatch(action);
// setTimeout(()=>{
// this.props.navigation.dispatch(action);
// },
// 400);
}
render() {
if (this.state.isLoading) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<ActivityIndicator size="large" />
</View>
);
}
return (
<LinearGradient colors={[App_colors.purple, App_colors.pink, App_colors.pink]} style={{flex:1}}>
<ScrollView ref="scrollView" style={{ flex:1 }} bounces={false}>
<StatusBar hidden={true} backgroundColor={App_colors.purple} barStyle="dark-content" />
<View style={{ flex:1,height}}>
<ImageBackground source={loginbg} style={{height }}>
<View style={{height }}>
<View style={{ flexDirection: 'row', margin: 15 }}>
<Image style={{ flex: 0.3, height: 90, alignItems: 'center', justifyContent: 'center', alignSelf: 'center' }} resizeMode={"contain"} source={app_icon} />
<Image style={{ flex: 1, alignItems: 'center', justifyContent: 'center', alignSelf: 'center' }} resizeMode={"contain"} source={fashionbot} />
</View>
<View style={{flex:1, justifyContent: 'center', marginLeft: 25, marginRight: 25 }}>
<Text style={{ fontSize: 22, color: '#fff', alignItems: 'center', alignSelf: 'center' }}>{'Login'}</Text>
<Text style={{ fontSize: 16, color: '#fff', marginTop: 15 }}>{'Email'}</Text>
<TextInput style={{ fontSize: 14, height: 40, marginLeft: 0, marginRight: 0, color: 'white' }}
value={this.state.email}
onChangeText={(text) => this.setState({ email: text })}
placeholder={'Your Email'}
placeholderTextColor={App_colors.white}
underlineColorAndroid={'white'}
textContentType={'username'}
keyboardType='email-address'
caretHidden={false}
onSubmitEditing={() => { Keyboard.dismiss() }}
/>
{/* PASSWORD */}
<Text style={{ fontSize: 16, color: '#fff', marginTop: 15 }}>{'Password'}</Text>
<TextInput style={{ fontSize: 14, height: 40, marginLeft: 0, marginRight: 0, color: 'white' }}
value={this.state.password}
onChangeText={(text) => this.setState({ password: text })}
placeholder={'*********'}
placeholderTextColor={App_colors.white}
underlineColorAndroid={'white'}
secureTextEntry={true}
caretHidden={false}
onSubmitEditing={() => { Keyboard.dismiss() }}
/>
<Text style={{ fontSize: 16, color: '#fff', marginTop: 5 }}>{'Forgot Password?'}</Text>
<TouchableOpacity style={{ justifyContent: 'center',alignSelf:'center', marginBottom: 10, marginTop: 30, width: width - 100, marginLeft: 0, marginRight: 0, alignItems: 'center', borderRadius: 25, borderWidth: 0, paddingTop: 15, paddingBottom: 15, backgroundColor: 'white' }}
onPress={this.onClick_Login}>
<Text style={{ fontSize: 16, color: App_colors.purple }}>{'Log in'}</Text>
</TouchableOpacity>
</View>
</View>
</ImageBackground>
</View>
</ScrollView>
</LinearGradient>
);
}
}
in development mode react-native will show white screen. But in production, it won't so don't worry. it is normal.
about navigation I can't be sure but share the code or demo(image/video).

React native search onChange input text, code structure

I am building a searchBar, whenever I do search I get undefined error because the value doesn't exist in state till I finish the whole value so I know that I will get error yet I am unable to solve it so I am trying to render cards according to the search input I think I did hard code my homeScreen I am not sure if I am doing it even right and here it comes the question to the three if statements inside render that I have is it good practice ? is it professional ? can i do something else which makes code easier to read and shorter ? I was thinking of eliminating the third if but I wasn't able to change state inside the second if so I had to add the toggle search function to let it work any ideas on how to eliminate the third if would be nice ..! thank you in advance guys
homeScreen.js
import axios from 'axios';
import React from 'react';
import {
ActivityIndicator,
ScrollView,
Text,
View,
TouchableOpacity,
TextInput,
} from 'react-native';
import Card from '../Components/Card/card';
export default class HomeScreen extends React.Component {
state = {
shows: [],
isLoading: true,
search: false,
title: '',
};
componentDidMount() {
this.getData();
}
toggleSearch = () => {
console.log('hlelleloe');
this.setState({
search: true,
});
};
getData = () => {
const requestUrls = Array.from({length: 9}).map(
(_, idx) => `http://api.tvmaze.com/shows/${idx + 1}`,
);
const handleResponse = data => {
this.setState({
isLoading: false,
shows: data,
});
};
const handleError = error => {
console.log(error);
this.setState({
isLoading: false,
});
};
Promise.all(requestUrls.map(url => axios.get(url)))
.then(handleResponse)
.catch(handleError);
};
render() {
const {isLoading, shows, search, title} = this.state;
if (isLoading) {
return <ActivityIndicator size="large" color="#0000ff" />;
} else if (!search) {
return (
<View>
<View>
<TouchableOpacity
onPress={this.toggleSearch}
style={{height: 300, width: 300}}>
<Text style={{textAlign: 'center', fontSize: 40}}>
Press to Search
</Text>
</TouchableOpacity>
</View>
<ScrollView style={{backgroundColor: '#E1E8E7'}}>
{shows.length &&
shows.map((show, index) => {
return (
<Card
key={show.data.id}
title={show.data.name}
rating={show.data.rating.average}
source={show.data.image.medium}
genres={show.data.genres}
language={show.data.language}
network={show.data.network}
schedule={show.data.schedule}
summary={show.data.summary}
navigation={this.props.navigation}
/>
);
})}
</ScrollView>
</View>
);
} else if (search) {
console.log(title);
return (
<View>
<TextInput
style={{
height: 100,
width: 100,
borderColor: 'gray',
borderWidth: 1,
}}
onChangeText={searchedTitle => (
<Card title={shows.data.searchedTitle} />
)}
/>
</View>
);
}
}
}
Card.js
import React from 'react';
import {
Image,
View,
Text,
Button,
StyleSheet,
TouchableOpacity,
} from 'react-native';
import {
widthPercentageToDP as wp,
heightPercentageToDP as hp,
} from 'react-native-responsive-screen';
import Icon from 'react-native-vector-icons/FontAwesome';
const Card = props => {
return (
<View style={styles.container}>
<Image style={styles.Image} source={{uri: `${props.source}`}} />
<Text style={styles.title}>{props.title}</Text>
<View style={styles.ratingContainer}>
<Text style={styles.rating}>Rating: {props.rating}</Text>
<Icon name="star" size={30} color="grey" />
</View>
<TouchableOpacity
style={styles.button}
onPress={() => {
props.navigation.navigate('Details', {
title: props.title,
rating: props.rating,
source: props.source,
genres: props.genres,
language: props.language,
network: props.network,
schedule: props.schedule,
summary: props.summary,
});
}}>
<Text style={styles.buttonText}>Press for details </Text>
</TouchableOpacity>
</View>
);
};
export default Card;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
},
Image: {
flex: -1,
width: wp('90%'),
height: hp('65%'),
},
title: {
flex: 1,
fontSize: 40,
borderRadius: 10,
color: '#3C948B',
margin: 15,
justifyContent: 'center',
alignItems: 'center',
},
ratingContainer: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: 'white',
elevation: 6,
justifyContent: 'space-between',
borderWidth: 1,
width: 300,
},
rating: {
fontSize: 25,
paddingLeft: 15,
},
button: {
flex: 1,
color: '#3C948B',
backgroundColor: '#3C948B',
height: hp('7%'),
width: wp('70%'),
margin: 20,
alignItems: 'center',
borderBottomLeftRadius: 10,
borderTopRightRadius: 10,
},
buttonText: {
flex: 1,
fontSize: 25,
},
});
you Need to implement a constructor for your React component.
Typically, in React constructors are only used for two purposes:
Initializing local state by assigning an object to this.state
Binding event handler methods to an instance
Do
state = {
shows: [],
isLoading: true,
search: false,
title: '',
};
replace this with
constructor(props){
super(props);
this.state = {
shows: [],
isLoading: true,
search: false,
title: '',
};
}