I create Sign In page in React Native for Android Phones. And now I get a little problem with displaying text. When the user opens Sign In screen and type his Email or Username and then clicks on the password field all from previously field will be "removed" or 'hidden'. This is code for the screen Sign In:
import React from 'react'
import {
View,
TextInput,
StyleSheet,
TouchableOpacity,
Dimensions,
// AsyncStorage
} from 'react-native';
import AsyncStorage from '#react-native-community/async-storage';
import { SafeAreaConsumer } from 'react-native-safe-area-context';
import axios from 'axios';
import {getAppLangCode} from '../helpers/store';
import {mediumFontFamily} from '../constants/Colors';
import {translate} from "../helpers/i18n";
import {getUserDatas} from '../helpers/user';
import BackButton from '../components/inners/BackButton';
import TextRegular from '../components/ui/TextRegular';
import TextMedium from '../components/ui/TextMedium';
import TextHeavy from '../components/ui/TextHeavy';
import Loader from '../components/Loader';
import ErrorSuccessPopup from '../components/ErrorSuccessPopup';
// const wHeight = Dimensions.get('window').height;
export default class SignInScreen extends React.Component {
static navigationOptions = {
headerShown: false,
headerTransparent: true,
title: 'Please sign in',
};
constructor(props){
super(props);
this.state = {
log: '',
password: '',
validating: false,
focus: '',
isSuccess: false,
title: translate('login_wrong'),
message: '',
isError: false,
}
this._ismounted = true;
}
componentWillUnmount() {
this._ismounted = false;
}
// static navigationOptions = ({ navigation }) => {
// return {
// title: translate('chat_screen'),
// headerLeft: () => {
// return <BackButton isBlack={true} onPress={navigation.goBack} style={{marginLeft: 10}}/>
// },
// };
// };
toForgetPwd = ()=>{
this.props.navigation.navigate('ForgetPwd');
}
toRegister = () => {
this.props.navigation.navigate('Register');
}
onInputChange = (name)=>(text)=>{
this.setState({[name]:text})
}
onFucusInput = (name) =>{
this.setState({focus: name})
}
_signInAsync = async () => {
const _self = this
const {log,password} = _self.state
if(log.length < 3 || password.length < 3){
_self.setState({ isError: true, message:translate('login_enter_email'), title:translate('login_wrong') })
return;
}
_self.setState({ validating: true });
const lang = await getAppLangCode();
axios({
method: 'POST',
url: `/login`,
data: {
log,
password,
lang: lang,
},
}).then(res => {
//Set the results to the people array.
// console.log(res.data);
const {success} = res.data
const title = null != res.data.title ? res.data.title : '';
const message = null != res.data.message ? res.data.message : '';
if( success ){
_self.saveToStorage(res.data.data).then(rt=>{
if( _self._ismounted ){
if( rt == true ){
_self.setState({ isSuccess: true, validating: false, message, title })
}else{
_self.setState({ isSuccess: true, validating: false, message:'Failed to store auth', title:translate('login_wrong') })
}
}
});
}else{
_self.setState({ isError: true, validating: false, message, title })
}
//Error handle the promise and set your errorMessage
}).catch(err => {
_self.setState({ validating: false, isError: true });
console.log(err)
} );
}
saveToStorage = async (userData) => {
let rt = false;
//if (userData) {
try {
await AsyncStorage.setItem('user', JSON.stringify({
isLoggedIn: true,
authToken: userData.auth_token,
id: userData.user_id,
name: userData.user_login
}));
// await getUserDatas() // .then(rt=>console.log(rt))
getUserDatas() // .then(rt=>console.log(rt))
rt = true
} catch (error) {
// Error saving data
rt = false;
// if( null != error.message )
}
// return true;
//}
return rt;
}
nextField = ()=>{
this.password.focus()
}
errorButton(){
const {apColors} = this.props;
return (
<TouchableOpacity onPress={()=>{this.setState({ isError: false });}}>
<View style={[styles.popupButton,{backgroundColor: apColors.appColor,}]}>
<TextHeavy style={styles.loginButtonText}>{translate('login_try_again')}</TextHeavy>
</View>
</TouchableOpacity>
)
}
successButton(){
const {apColors} = this.props;
return (
<TouchableOpacity onPress={() => this._onPressDone() }>
<View style={[styles.popupButton,{backgroundColor: apColors.appColor,}]}>
<TextHeavy style={styles.loginButtonText}>{translate('login_done')}</TextHeavy>
</View>
</TouchableOpacity>
)
}
_onPressDone(){
this.setState({ isSuccess: false });
const {route,navigation} = this.props;
const loggedInRoute = route.params?.loggedInRoute ?? 'Home';
const backRoute = route.params?.backRoute ?? 'Home';
switch (loggedInRoute){
case 'Profile':
navigation.navigate( 'ProfileStack', { screen: 'Profile', params: {backRoute} } )
break;
case 'Bookings':
navigation.navigate( 'BookingsStack', { screen: 'Bookings', params: {backRoute} } )
break;
case 'Bookmarks':
navigation.navigate( 'BookmarksStack', { screen: 'Bookmarks', params: {backRoute} } )
break;
default:
navigation.navigate( loggedInRoute, {backRoute} )
}
}
_renderGreeting(){
const {apColors} = this.props;
return (
<>
<TextHeavy style={[styles.loginGreeting,{color: apColors.hText,}]}>{translate('login_hi')}</TextHeavy>
<TextHeavy style={[styles.loginGreeting,{color: apColors.hText,}]}>{translate('login_welcome')}</TextHeavy>
</>
)
}
_onGoBack(){
// const backRoute = this.props.navigation.getParam('backRoute', 'Home');
const backRoute = this.props.route.params?.backRoute ?? 'Home';
this.props.navigation.navigate(backRoute)
}
_renderHeader(cstyle = {}){
// {top: 30 + insets.top}
const {apColors} = this.props;
return (
<View style={[styles.navBar,cstyle]}>
<BackButton color={apColors.backBtn} onPress={ () => this._onGoBack() }/>
</View>
)
}
_renderFooter(){
const {apColors} = this.props;
return (
<View style={styles.signUp}>
<TextRegular style={[styles.signUpText,{color: apColors.pText,}]}>{translate('dont_have_account')}</TextRegular>
<TouchableOpacity onPress={this.toRegister}>
<TextMedium style={[styles.signUpButton,{color: apColors.pText,}]}>{translate('sign_up')}</TextMedium>
</TouchableOpacity>
</View>
)
}
render() {
const {apColors} = this.props;
const {focus,validating,isSuccess,isError,title,message} = this.state
let logStyle = [styles.textInput,{borderColor: apColors.separator,color: apColors.pText}],
pwdStyle = [styles.textInput,{borderColor: apColors.separator,color: apColors.pText}];
if( focus == 'log' ) logStyle = [logStyle,{borderColor: apColors.inputFocus,}]
if( focus == 'password' ) pwdStyle = [pwdStyle,{borderColor: apColors.inputFocus,}]
// return null;
return (
<SafeAreaConsumer style={{flex: 1}}>
{insets => <View style={[styles.container,{backgroundColor: apColors.appBg,paddingTop: insets.top,paddingBottom: insets.bottom,paddingLeft: insets.left,paddingRight: insets.right}]}>
{this._renderHeader()}
<Loader loading={validating}/>
<ErrorSuccessPopup isSuccess={isSuccess} isError={isError} title={title} message={message} successButton={this.successButton()} errorButton={this.errorButton()}/>
<View style={styles.loginInner}>
{this._renderGreeting()}
<TextRegular style={[styles.fieldLabel,{color: apColors.fieldLbl,marginTop:40}]}>{translate('user_email')}</TextRegular>
<TextInput
// placeholder="Username or Email"
style={logStyle}
onChangeText={this.onInputChange('log')}
onFocus={e=>this.onFucusInput('log')}
returnKeyType='next'
onSubmitEditing = {this.nextField}
autoCorrect={false}
underlineColorAndroid='transparent'
autoCapitalize="none"
autoCompleteType="off"
keyboardType="email-address"
/>
<TextRegular style={[styles.fieldLabel,{color: apColors.fieldLbl,}]}>{translate('password')}</TextRegular>
<TextInput
// placeholder="Password"
style={pwdStyle}
onChangeText={this.onInputChange('password')}
onFocus={e=>this.onFucusInput('password')}
secureTextEntry={true}
returnKeyType='done'
ref={input=>this.password = input}
autoCorrect={false}
autoCapitalize="none"
underlineColorAndroid='transparent'
// autoCompleteType="off"
// keyboardType="visible-password"
/>
<TouchableOpacity onPress={this.toForgetPwd}>
<TextRegular style={[styles.forgetPassword,{color: apColors.appColor,}]}>{translate('forget_password')}</TextRegular>
</TouchableOpacity>
<View style={styles.spacer}/>
<TouchableOpacity onPress={this._signInAsync}>
<View style={[styles.loginButton,{backgroundColor: apColors.appColor,}]}>
<TextHeavy style={styles.loginButtonText}>{translate('login')}</TextHeavy>
</View>
</TouchableOpacity>
</View>
{this._renderFooter()}
</View>}
</SafeAreaConsumer>
);
}
}
const styles = StyleSheet.create({
container: {
flex:1,
// alignItems:'center',
// justifyContent:'center'
minHeight: Dimensions.get('window').height - 200,
},
navBar: {
// position: 'absolute',
// top: 52,
// // marginTop: 52,
// left: 0,
// right: 0,
// zIndex: 200,
paddingLeft: 15,
paddingRight: 15,
flexDirection: 'row',
alignItems: 'center',
// backgroundColor: 'red',
paddingTop: 8,
paddingBottom: 7,
},
loginInner: {
flex: 1,
paddingTop: 50,
paddingHorizontal: 30,
// backgroundColor: 'red',
},
loginGreeting: {
fontSize: 34,
},
fieldLabel:{
fontSize: 17,
marginTop: 20,
},
textInput:{
// margin:0,
// marginTop:20,
// height:40,
// backgroundColor:'red',
// // borderRadius:20,
// paddingLeft:15,
// // fontSize: AppFontSize,
// // fontFamily: AppFontFamily,
// borderRadius: 4,
// width: 150,
// flex: 1,
height: 35,
// marginTop: 5,
paddingVertical: 5,
borderBottomWidth: 1,
borderStyle: 'solid',
fontSize: 17,
fontFamily: mediumFontFamily,
},
forgetPassword: {
marginTop: 35,
fontSize: 17,
textAlign: 'right',
},
spacer: {
height: 60,
},
loginButton: {
height: 44,
borderRadius: 8,
justifyContent: 'center',
// marginTop: 60,
},
loginButtonText: {
color: '#fff',
fontSize: 15,
textAlign: 'center',
},
signUp: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
// alignSelf: 'flex-end'
// position: 'absolute',
// bottom: 30,
// left: 0,
// right: 0,
marginBottom: 15,
},
signUpText: {
fontSize: 15,
lineHeight: 20,
},
signUpButton: {
fontSize: 15,
lineHeight: 17,
marginLeft: 5,
},
popupButton: {
height: 35,
borderRadius: 8,
justifyContent: 'center',
paddingHorizontal: 30,
marginTop: 20
},
})
Where I have a mistake? How to solve this problem? Thanks all for help.
Related
store.js
// Imports: Dependencies
import { createStore } from 'redux';
import employeeDetailReducer from './employeeDetailReducer';
// Middleware: Redux Persist Config
const store = createStore(employeeDetailReducer);
employeeDetailReducer.js
const initialState = {
employeeDetails: {
name: "",
schoolName: "",
companyName: ""
}
};
const employeeDetailReducer = (state = initialState, action) => {
switch (action.type) {
case "SAVE_EMPLOYEE_DETAIL": {
return {
...state,
employeeDetails: action.employeeDetails
}
}
default: {
return state;
}
}
}
export default employeeDetailReducer;
EmployeeDetails.js
import React from "react";
import { View, Text, StyleSheet, SafeAreaView, TextInput, TouchableHighlight } from "react-native";
import { connect } from "react-redux"
import { saveEmployeeDetails } from "./saveEmployeeDetailAction"
class EmployeeDetails extends React.Component {
constructor(props) {
super(props)
this.state = {
name: "",
schoolName: "",
companyName: ""
}
}
render() {
return (
<SafeAreaView style={styles.container}>
<View style={styles.mainView}>
<Text style={styles.mainTextStyle}>Submit Employee Details</Text>
<Text style={styles.textStyle}>Enter Your Name</Text>
<TextInput
style={styles.textInputStyle}
underlineColorAndroid="transparent"
placeholderTextColor="#cccccc"
placeholder="Enter Your Name"
onChangeText={name => {
this.setState({ name: name }, () => {
});
}}
/>
<Text style={styles.textStyle}>Enter Your School Name</Text>
<TextInput
style={styles.textInputStyle}
underlineColorAndroid="transparent"
placeholderTextColor="#cccccc"
placeholder="Enter Your School Name"
onChangeText={schoolName => {
this.setState({ schoolName: schoolName }, () => {
});
}}
/>
<Text style={styles.textStyle}>Enter Your Company Name</Text>
<TextInput
style={styles.textInputStyle}
underlineColorAndroid="transparent"
placeholderTextColor="#cccccc"
placeholder="Enter Your Company Name"
onChangeText={companyName => {
this.setState({ companyName: companyName }, () => {
});
}}
/>
<TouchableHighlight
underlayColor="transparent"
style={styles.buttonStyle}
onPress={() => {
var employeeDetails = {};
employeeDetails.name = this.state.name;
employeeDetails.schoolName = this.state.schoolName;
employeeDetails.companyName = this.state.companyName;
this.props.reduxSaveEmployeeDetail(employeeDetails)
this.props.navigation.navigate("ShowEmployeeDetail")
}}
>
<Text style={styles.buttonTextStyle}>Submit</Text>
</TouchableHighlight>
</View>
</SafeAreaView>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
width: "100%",
height: "100%",
justifyContent: 'flex-start',
alignItems: 'center',
backgroundColor: "lightgray",
paddingBottom: 50
},
mainView: {
width: "100%",
height: "50%",
justifyContent: "flex-start",
alignItems: "center",
padding: 20,
},
textInputStyle: {
width: "100%",
height: 40,
backgroundColor: "white",
paddingHorizontal: 15,
marginBottom: 10,
marginTop: 10
},
textStyle: {
width: "100%",
height: 20,
textAlign: "left",
marginTop: 10,
fontSize: 15
},
mainTextStyle: {
width: "100%",
height: 40,
//paddingHorizontal:15,
textAlign: "center",
marginTop: 10,
marginBottom: 10,
fontSize: 20
},
buttonStyle: {
width: "100%",
height: 40,
borderRadius: 5,
justifyContent: "center",
alignItems: "center",
backgroundColor: "white",
marginTop: 20
},
buttonTextStyle: {
width: "100%",
height: "100%",
textAlign: "center",
marginTop: 10,
fontSize: 18
},
})
const mapDispatchToProps = (dispatch) => {
return {
reduxSaveEmployeeDetail: (employeDetails) => dispatch(saveEmployeeDetails(employeDetails))
}
}
export default connect(
null,
mapDispatchToProps
)(EmployeeDetails);
App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store'
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import EmployeeDetali from './EmployeeDetali';
import ShowEmployeeDetail from './ShowEmployeeDetail';
export default App = () => {
return (
<Provider store={store}>
<AppNavigator />
</Provider>
);
};
const Stack = createNativeStackNavigator();
const AppNavigator = () => {
return (
<NavigationContainer initialState="EmployeeDetali">
<Stack.Screen name="EmployeeDetali" component={EmployeeDetali} />
<Stack.Screen name="ShowEmployeeDetail" component={ShowEmployeeDetail} />
</NavigationContainer>
)
}
Error
ERROR TypeError: store.getState is not a function. (In 'store.getState()', 'store.getState' is undefined)
This error is located at:
in Provider (created by App)
in App
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in ReactNativeApp(RootComponent)
I don't know what is wrong here...
I'm also add store like this
import {store} from './store'
It also give me error so how can soul my error where is my error
I don't have any idea for adding redux in class component so how I can do this
I'm learning from here
I also learn redux
so anyone give me suggestion what happing in my code
Do,
export { store };
in store.js.
and,
import {store } from "./store";
in app.js
We are currently developing based on React Native.
And I received data by GET request through API document,
and I created scroll view through MAP method.
So now I'm trying to make it possible to choose,
but if I choose one, it's all chosen.
How can I make you choose one by one if I choose one from my code?
import React, { useEffect, useState } from "react";
import { SvgCssUri } from "react-native-svg";
import { DeviceEventEmitter } from "react-native";
import {
View,
StyleSheet,
TouchableHighlight,
Text,
ScrollView,
Image,
} from "react-native";
import {
widthPercentageToDP as wp,
heightPercentageToDP as hp,
} from "react-native-responsive-screen";
import axios from "axios";
import BouncyCheckbox from "react-native-bouncy-checkbox";
const Select = ({ navigation }) => {
let bouncyCheckboxRef = null;
const [bodyType, setBodyType] = useState([]);
const [standardSelected, setStandardSelected] = useState(false);
const [isSelected, setSelected] = useState(false);
const bodyGetData = async () => {
let body = [];
try {
let config = {
method: "get",
url:
"http://everyweardev-env.eba-azpdvh2m.ap-northeast-2.elasticbeanstalk.com/api/v1/user/bodyType/male",
headers: {},
};
axios(config).then(function (response) {
response.data.data.map((u) => {
switch (u.bodyType) {
case "standard":
body.push({ bodyType: "스탠다드", imgUrl: u.imgUrl, key: 1 });
break;
case "reverseTriangle":
body.push({ bodyType: "역삼각형", imgUrl: u.imgUrl, key: 2 });
break;
case "triangle":
body.push({ bodyType: "삼각형", imgUrl: u.imgUrl, key: 3 });
break;
case "circle":
body.push({ bodyType: "원형", imgUrl: u.imgUrl, key: 4 });
break;
case "hourglass":
body.push({ bodyType: "직사각형", imgUrl: u.imgUrl, key: 5 });
break;
}
});
return setBodyType(body);
});
} catch (err) {
console.log(err);
}
};
useEffect(() => {
const unsubscribe = navigation.addListener("focus", () => {
bodyGetData();
});
return unsubscribe;
}, [navigation]);
const onClick = (e) => {
console.log(e);
bodyType.map((u) => {
switch (u.bodyType) {
case u.bodyType === "스탠다드":
setSelected(!isSelected);
console.log(isSelected);
break;
case "역삼각형":
setSelected(!isSelected);
break;
}
});
};
return (
<View style={styles.container}>
<Text
style={{ fontSize: wp("5.5%"), fontWeight: "bold", marginBottom: 21 }}
>
자신의 체형을 선택해 주세요
</Text>
<View style={{ flexDirection: "row", marginBottom: hp("10%") }}>
<Text style={{ fontSize: wp("4.5%"), marginRight: wp("1%") }}>
더 정확한 평가를 받으실 수 있습니다
</Text>
<Image
source={require("../../images/smile.png")}
style={{ marginTop: hp("0.5%") }}
/>
</View>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={true}>
{bodyType.map((data) => (
<>
<TouchableHighlight
style={styles.bodySelect}
value={data.bodyType}
onPress={onClick}
// onPress={() => bouncyCheckboxRef?.onPress()}
>
<>
<BouncyCheckbox
isChecked={!isSelected}
ref={(ref) => (bouncyCheckboxRef = ref)}
size={25}
fillColor="black"
unfillColor="#FFFFFF"
iconStyle={{ borderColor: "white" }}
textStyle={{ fontFamily: "JosefinSans-Regular" }}
disableBuiltInState
onPress={onClick}
style={{
alignSelf: "flex-start",
marginLeft: wp("3%"),
marginTop: hp("2%"),
}}
/>
<SvgCssUri
uri={data.imgUrl}
width="90%"
height="60%"
marginTop="-5%"
key={data.key}
/>
<Text style={styles.bodytype}>{data.bodyType}</Text>
</>
</TouchableHighlight>
</>
))}
</ScrollView>
<TouchableHighlight
style={styles.button}
onPress={() => {
navigation.navigate("얼굴형 정보 입력");
}}
underlayColor="gray"
>
<>
<Text style={styles.text}>선택 완료</Text>
</>
</TouchableHighlight>
</View>
);
};
const styles = StyleSheet.create({
container: {
justifyContent: "center",
alignItems: "center",
marginTop: hp("5%"),
},
button: {
justifyContent: "center",
alignItems: "center",
width: wp("70%"),
height: hp("7%"),
color: "white",
backgroundColor: "black",
borderRadius: 10,
marginTop: hp("17%"),
},
text: {
color: "white",
fontSize: wp("5.2%"),
fontWeight: "bold",
},
bodySelect: {
marginLeft: 16,
marginRight: 16,
width: wp("70%"),
height: hp("35%"),
alignItems: "center",
borderRadius: 30,
backgroundColor: "#ffffff",
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 3,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
bodytype: {
marginTop: hp("3%"),
fontWeight: "bold",
fontSize: wp("8%"),
},
});
export default Select;
this example explain how to select individual choice.
do these steps :
//define state to save selected value inside it
const [selected, setSelected] = React.useState();
//handle item onPress
const onPress = (item) => {
setSelected(item);
}
//check if item selected
const isSelected = (item) => {
return selected?.unique_id === item.unique_id;
}
//and in render function
<ScrollView>
{
data.map((item, index) => {
return(
<ItemComponent
onPress={() => setSelected(item)}
style={isSelected(item) ? selectedStyle : defaultStyle}>
</ItemComponent>
)
})
}
</ScrollView>
full code try snack here
import * as React from 'react';
import { Text, View, StyleSheet, ScrollView, TouchableOpacity} from 'react-native';
export default function App() {
const [selected, setSelected] = React.useState();
const data = [
{
unique_id : 1,
text : "item one"
},
{
unique_id : 2,
text : "item two"
},
{
unique_id : 3,
text : "item three"
},
{
unique_id : 4,
text : "item four"
}
];
const onPress = (item) => {
setSelected(item);
}
const isSelected = (item) => {
return selected?.unique_id === item.unique_id;
}
return (
<ScrollView>
{
data.map((item, index) => {
return(
<TouchableOpacity
key={item.unique_id}
onPress={() => {
setSelected(item);
}}
style={{
padding : 25,
margin : 10,
backgroundColor : isSelected(item) ? "red" : "#eee"
}}
>
<Text>{item.text}</Text>
</TouchableOpacity>
)
})
}
</ScrollView>
);
}
I've implemented an app based on react native. This app shows me a list via swipelistview. But I have a Problem. when list add new items after scroll down, swipelistview won't work properly. In fact it works by Accident. I don't know where i've made mistake.
this is my code:
import React , {Component} from 'react';
import { StyleSheet, Text, View, FlatList ,ActivityIndicator,Animated , TouchableOpacity, Alert } from 'react-native';
import { SwipeListView } from 'react-native-swipe-list-view';
import { Container, Header, Content, Accordion ,Icon ,Item, Input , Button ,ActionSheet , Card, CardItem, Body} from "native-base";
var DESTRUCTIVE_INDEX = 3;
var CANCEL_INDEX = 4;
class App extends Component {
constructor(props) {
super(props);
this.actionSheet = null;
}
state = {
data: [],
filteredData: [],
page: 1,
loading: false,
error: null,
spinner: false,
searchText:'',
lety:false,
refreshing: false
};
componentDidMount() {
console.disableYellowBox = true;
this.fetchData();
}
handleLoadMore = () => {
this.setState(
{
page: this.state.page + 1
},
() => {
this.fetchData();
}
);
};
fetchData = () => {
const page = this.state.page;
this.setState({ loading: true });
let response = fetch(
'http://webgispro.ir/home/GetWords/' + page ,
{
method: "POST"
}
).then((response) => response.json())
.then((responseJson) => {
this.setState(
{
data : page === 1 ? Array.from(responseJson): [...this.state.data, ...responseJson] ,
loading: false,
refreshing: false
})
})
.catch((error) => {
this.setState({ error, loading: false });
});
};
searchData = (searchText) => {
this.setState({searchText: searchText.toLowerCase()});
if (searchText =='') {
this.setState({filteredData: []});
this.setState({lety:false})
return false;
}
let filteredData = this.state.data.filter(function (item) {
return item.Word.toLowerCase().includes(searchText.toLowerCase());
});
this.setState({lety : filteredData.length == 0 ? true : false})
this.setState({filteredData: filteredData});
};
renderHeader = () => {
return <Searchbar
style={{ width:'100%' }}
inputStyle={{borderWidth: 0}}
round={false}
lightTheme={true}
placeholder="Search..."
autoCapitalize='none'
autoCorrect={false}
onChangeText={this.searchData}
value={this.state.searchText}
/>
};
renderFooter = () => {
if (!this.state.loading) return null;
return (
<View
style={{
paddingVertical: 20,
borderTopWidth: 1,
borderColor: "#CED0CE"
}}
>
<ActivityIndicator animating ={true} color="blue" style={{height: 80, marginTop: 10, opacity: 1 }} size="large" />
</View>
);
};
renderSeparator = () => {
return (
<View
style={{
height: 1,
width: "100%",
backgroundColor: "#CED0CE",
//marginLeft: "14%"
}}
/>
);
};
handleRefresh = () => {
this.rowHeightAnimatedValues = {};
this.setState(
{
page: 1,
refreshing: true
},
() => {
this.fetchData();
}
);
};
editItem = key => () => {
var example = this.state.data.find(o=>o.Id == key).Example
if ( this.actionSheet !== null ) {
const title = <Text style={{ color: 'black', fontSize: 23 }}>{example}</Text>
this.actionSheet._root.showActionSheet(
{
options: [] ,
cancelButtonIndex: CANCEL_INDEX,
destructiveButtonIndex: DESTRUCTIVE_INDEX,
title:title
}, (i) => console.log(i));
}
}
deleteItem = key => () => {
Alert.alert(
"???",
"??? ???? ??? ????? ????? ??",
[
{
text: "???",
onPress: () => console.log("Cancel Pressed"),
style: "cancel"
},
{ text: "???", onPress: () => console.log("OK Pressed") }
],
{ cancelable: false }
);
}
onRowOpen =() => {
console.log('cfdfdf')
}
render() {
return (
<View style={styles.container}>
<Header searchBar rounded>
<Item>
<Icon name="ios-search" />
<Input placeholder="Search" onChangeText={this.searchData} />
<Icon name="ios-people" />
</Item>
<Button transparent>
<Text>Search</Text>
</Button>
</Header>
<SwipeListView
useFlatList
extraData={this.state}
data={this.state.filteredData && this.state.filteredData.length > 0 || this.state.lety == true ? this.state.filteredData : this.state.data}
keyExtractor={item => item.Id.toString()}
renderItem={(data, rowMap) => (
<Animated.View
style={[
styles.rowFront,
data.index % 2 === 0 && { backgroundColor: 'white' },
{ height: 100 }
]}
>
<Text style={{position: 'absolute', top: 35 , fontSize:20}}>
{data.item.Word}
</Text>
</Animated.View>
)}
renderHiddenItem={ (data, rowMap) => (
<View style={styles.rowBack}>
<Text style={{fontSize:20}}>{data.item.Meaning}</Text>
<TouchableOpacity style={[styles.backRightBtn, styles.backRightBtnLeft]} onPress={this.editItem(data.item.Id)}>
<Icon name='md-information-circle-outline' />
</TouchableOpacity>
<TouchableOpacity style={[styles.backRightBtn, styles.backRightBtnRight]} onPress={this.deleteItem(data.item.Id)}>
<Icon name='trash-outline' />
</TouchableOpacity>
</View>
)}
leftOpenValue={90}
rightOpenValue={-150}
onEndReached={this.handleLoadMore}
onEndReachedThreshold={0.5}
initialNumToRender={8}
ItemSeparatorComponent={this.renderSeparator}
ListFooterComponent={this.renderFooter}
onRefresh={this.handleRefresh}
refreshing={this.state.refreshing}
/>
<ActionSheet ref={(c) => { this.actionSheet = c; }} />
</View>
);
}
}
export default App
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
flex: 1,
//paddingTop: 50,
},
backTextWhite: {
color: '#FFF'
},
rowFront: {
alignItems: 'center',
backgroundColor: '#CCC',
justifyContent: 'center',
},
rowBack: {
alignItems: 'center',
backgroundColor: 'green',
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
paddingLeft: 15,
},
backRightBtn: {
alignItems: 'center',
bottom: 0,
justifyContent: 'center',
position: 'absolute',
top: 0,
width: 75
},
backRightBtnLeft: {
backgroundColor: 'blue',
right: 75
},
backRightBtnRight: {
backgroundColor: 'red',
right: 0
},
});
The list works properly and comes data but whenever I scroll down or up it doesn't work anymore. Please help me
If you are in mindset to change your package, then you can try react-native-snap-carousel, perfect for your requirement. Thanks
import React, { Component } from 'react';
import {
SafeAreaView,
Text,
View,
Image,
ScrollView,
StyleSheet,
StatusBar,
TextInput,
TouchableOpacity
} from 'react-native';
export default class LoginFrom extends React. Component {
state = {
isLoading: false,
strEmail: "test#example.com", isEmailValid: true, errMsgEmail: "",
strPassword: "test#123", isPasswordValid: true, errMsgPassword: "",
strErrMsg: ""
}
login() {
setTimeout(() => {
fetch("url", {
method: 'POST',
headers: {
'Content-type': 'application/json'
},
body: JSON.stringify({
'email': this.state.strEmail,
'password': this.state.strPassword
})
}).then((response) => {
if (response.status == 200) {
return response.json()
} else {
return null
}
}).then((responseJson) => {
console.log(responseJson);
if (responseJson != null) {
this.setState({
strErrMsg: ""
})
} else {
this.setState({
strErrMsg: "Email and password does not match."
})
}
})
}, 100);
}
txtEmailChangeHangler = (val) => {
this.setState({
strEmail: val.trim()
})
}
txtPasswordChangeHangler = (val) => {
this.setState({
strPassword: val.trim()
})
}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.inputbox}
onSubmitEditing={() => { this.secondTextInput.focus(); }}
underlineColorAndroid='rgba(0,0,0,0)'
placeholder='Email'
selectionColor='#fff'
value={this.state.strEmail}
onChangeText={this.txtEmailChangeHangler}
keyboardType='email-address' />
<TextInput
secureTextEntry={true}
style={styles.inputbox}
underlineColorAndroid='rgba(0,0,0,0)'
placeholder='password'
onChangeText={this.txtPasswordChangeHangler}
value={this.state.strPassword}
ref={(input) => { this.secondTextInput = input; }} />
<TouchableOpacity onPress={this.login} style={styles.button}>
<Text style={styles.buttontext}>{this.props.type}</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#D3EDFA',
flexGrow: 1,
alignItems: 'center',
justifyContent: 'center'
},
inputbox: {
width: 300,
backgroundColor: 'rgba(255,255,255,1)',
borderRadius: 25,
paddingHorizontal: 16,
marginVertical: 10
},
button: {
width: 300,
backgroundColor: '#ED6825',
borderRadius: 25,
paddingVertical: 16,
marginVertical: 10
},
buttontext:
{
fontSize: 16,
color: '#ffffff',
fontWeight: '100',
textAlign: 'center',
paddingHorizontal: 16,
}
})
Just try replacing login function with fat arrow function
login() {
// your code here
}
to
login = () => {
// your code here
}
hope it helps, this is done because fat arrow functions implicty binds this keyword
I'am having trouble with modal because I have some in a "Datails screen" with Flatlist and it is working fine, actually. But the thing is, before navigating to my "Datails screen" the user will first see the "Category screen", and here is where the problem. Because I didn't type any modal at my "Category screen", but whenever I click on any button in there a modal is showing, it looks very tricky for me.
Here is my code
Details.js (this is the only screen where I want to display my modal)
import React, {Component} from 'react';
import {Text, TouchableHighlight, View,
StyleSheet, Platform, FlatList, AppRegistry,
TouchableOpacity, RefreshControl, Dimensions, Modal
} from 'react-native';
export default class Details extends Component {
static navigationOptions = {
title: ''
};
constructor()
{
super ()
this.state = {
showModal: true
}
}
state = {
data: [],
refreshing: false
};
fetchData = async() => {
const { params } = this.props.navigation.state;
const response_Cat = await fetch('http://192.168.254.100:3307/categories/' + params.id);
const category_Cat = await response_Cat.json();
this.setState({data: category_Cat});
};
componentDidMount() {
this.fetchData();
};
_onRefresh() {
this.setState({ refreshing: true });
this.fetchData().then(() => {
this.setState({ refreshing: false })
});
};
render() {
const { params } = this.props.navigation.state;
return (
<View style = { styles.container }>
<FlatList
data = { this.state.data }
renderItem = {({ item }) =>
<TouchableOpacity style = { styles.buttonContainer }>
<Text style = { styles.buttonText }
onPress = { () => { this.setState({showModal:true}) } }>{ item.menu_desc } { item.menu_price }</Text>
</TouchableOpacity>
}
keyExtractor={(item, index) => index.toString()}
/*refreshControl = {
<RefreshControl
refreshing = { this.state.refreshing }
onRefresh = { this._onRefresh.bind(this) }
/>
}*/
/>
<View>
<Modal
onRequestClose={() => console.warn('no warning')}
visible={this.state.showModal}
>
<TouchableOpacity style = { styles.buttonContainer }>
<Text style = { styles.buttonText }
onPress = { () => { this.setState({ showModal:false }) } }>Hello</Text>
</TouchableOpacity>
</Modal>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container:{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
},
pageName:{
margin:10,fontWeight:'bold',
color:'#000', textAlign:'center'
},
productBox:{
padding:5,margin:10,borderColor:'orange',borderBottomWidth:1
},
price:{
padding:5, color:'orange',fontWeight:'bold',textAlign:'center'
},
proName:{
padding:5,color:'blue',textAlign:'center'
},
buttonContainer: {
backgroundColor: '#f7c744',
paddingVertical: 10,
borderRadius: 30,
marginBottom: 10,
},
buttonText: {
textAlign: "center",
color: 'rgb(32, 53, 70)',
fontWeight: 'bold',
fontSize: 18
},
modalView: {
backgroundColor: "#aaa",
height: 150,
justifyContent: 'center',
alignItems: 'center'
},
closeText: {
backgroundColor: '#333',
color: '#bbb',
padding: 5,
margin: 20
}
})
//AppRegistry.registerComponent('Details', () => Details);
categories.js (this is the page where I don't type any modal code, I guess)
import React, {Component} from 'react';
import {Text, TouchableHighlight, View,
StyleSheet, Platform, FlatList, AppRegistry,
TouchableOpacity, RefreshControl
} from 'react-native';
export default class Categories extends Component {
state = {
data: [],
refreshing: false
};
fetchData = async() => {
const { params } = this.props.navigation.state;
const response_Cat = await fetch('http://192.168.254.100:3307/categories/');
const category_Cat = await response_Cat.json();
this.setState({data: category_Cat});
};
componentDidMount() {
this.fetchData();
};
_onRefresh() {
this.setState({ refreshing: true });
this.fetchData().then(() => {
this.setState({ refreshing: false })
});
}
render() {
const { params } = this.props.navigation.state;
return (
<View style = { styles.container }>
<FlatList
data = { this.state.data }
renderItem = {({ item }) =>
<TouchableOpacity style = {styles.buttonContainer}>
<Text style = {styles.buttonText}
onPress = { () => this.props.navigation.navigate('Details', { id: item.cat_id }) }>{ item.cat_name }</Text>
</TouchableOpacity>
}
keyExtractor={(item, index) => index.toString()}
refreshControl = {
<RefreshControl
refreshing = { this.state.refreshing }
onRefresh = { this._onRefresh.bind(this) }
/>
}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container:{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
},
pageName:{
margin:10,fontWeight:'bold',
color:'#000', textAlign:'center'
},
productBox:{
padding:5,margin:10,borderColor:'orange',borderBottomWidth:1
},
price:{
padding:5, color:'orange',fontWeight:'bold',textAlign:'center'
},
proName:{
padding:5,color:'blue',textAlign:'center'
},
buttonContainer: {
backgroundColor: '#f7c744',
paddingVertical: 10,
borderRadius: 30,
marginBottom: 10,
},
buttonText: {
textAlign: "center",
color: 'rgb(32, 53, 70)',
fontWeight: 'bold',
fontSize: 18
},
})
AppRegistry.registerComponent('Categories', () => Categories);
In your details.js you kept showModal: true in constructor itself.
Change it to false, and make it true whenever you want to show a modal.
I guess you should make it true after you have successfully fetched data. i.e keep it in fetchData()
this.setState({data: category_Cat, showModal:true});