Modifying an attribute of an element in React Native - javascript

I am pretty new to React Native and I want to create a very simple passwordShow Button in the Textinput. The TouchableOpacity triggers the very simple showPassword function and changes the var passwordHidden to false. But sadly the reactTextInput isn't updating and the password keeps hidden. Any ideas why?
export function TextInput(props: Props) {
let passwordHidden = true
function showPassword() {
passwordHidden = false
}
return (
<View style={{marginBottom: props.marginBottomProp}}>
<FormComponentMargin>
<View style={styles.container}>
<View style={{width: 48, alignItems: 'center'}}>
<Icon
name={props.icon}
type={props.iconType ?? "font-awesome"}/>
</View>
<ReactTextInput
style={{...styles.textInput}}
placeholderTextColor={placeholderTextColor}
secureTextEntry={passwordHidden}
{...props}
/>
<TouchableOpacity onPress={showPassword}>
<View
style={{width: 48, alignItems: 'center', position: 'absolute', right: 0, bottom: 0}}>
<Icon
name={"eye"}
type={props.iconType ?? "font-awesome"}
color={tintColor}
size={20}
/>
</View>
</TouchableOpacity>
</View>
</FormComponentMargin>
</View>
)
}

You need to re-render your component once you tapped the button, so handle the variable as a state.
Make use of useState hook -
import React, {useState} from 'react';
export function TextInput(props: Props) {
const [passwordHidden, setPasswordHidden] = useState(true);
function showPassword() {
setPasswordHidden(!passwordHidden);
}
return (
<View style={{marginBottom: props.marginBottomProp}}>
<FormComponentMargin>
<View style={styles.container}>
<View style={{width: 48, alignItems: 'center'}}>
<Icon
name={props.icon}
type={props.iconType ?? "font-awesome"}/>
</View>
<ReactTextInput
style={{...styles.textInput}}
placeholderTextColor={placeholderTextColor}
secureTextEntry={passwordHidden}
{...props}
/>
<TouchableOpacity onPress={showPassword}>
<View
style={{width: 48, alignItems: 'center', position: 'absolute', right: 0, bottom: 0}}>
<Icon
name={"eye"}
type={props.iconType ?? "font-awesome"}
color={tintColor}
size={20}
/>
</View>
</TouchableOpacity>
</View>
</FormComponentMargin>
</View>
)
}

Related

React-Native FlatList is not scrolling

I am quite new to react native. I have created a FlatList for rendering this list of items, however, it is not scrolling. I've googled it for hours and tried nearly everything suggested in stack overflow threads - removed flex, added flex, wrapped it in a view, but nothing seems to work.
Here is my code (the issue is in the second FlatList) -
return(
<View style = {{ height: '100%' }}>
<View style = {{ width: '100%' }}>
<AppHeader />
</View>
<View style = {{ width: '100%'}}>
<View style = {{ width: '70%', alignSelf: 'center', flex: 1 }}>
<View>
<FlatList
data = {this.getTodayDay()}
renderItem = {this.renderItemDays}
keyExtractor = {this.keyExtractor}
/>
</View>
<FlatList
data = {this.getVisibleHours()}
renderItem = {this.renderItem}
keyExtractor = {this.keyExtractor}
scrollEnabled = {true}
/>
</View>
</View>
</View>
this.renderItem -
renderItem = () => {
// irrelevant code
if( isClass === true ){
return(
<ListItem bottomDivider = {true} style = {styles.renderItemActiveClass}>
<ListItem.Content>
<TouchableOpacity
onPress = {()=>{
this.props.navigation.navigate('ClassDetailsScreen', { "data": classData })
}}>
<ListItem.Title>{ definiteClassTime }</ListItem.Title>
<ListItem.Subtitle>{ classData.class_name }</ListItem.Subtitle>
</TouchableOpacity>
</ListItem.Content>
</ListItem>
)
}
else{
return(
<ListItem bottomDivider = {true} style = {styles.renderItemClass}
containerStyle = {styles.renderItemContent}>
<ListItem.Content>
<ListItem.Title>{item}:00</ListItem.Title>
<ListItem.Subtitle>No Class</ListItem.Subtitle>
</ListItem.Content>
</ListItem>
)
}
}
the StyleSheet -
renderItemClass: {
borderColor: 'purple',
borderWidth: 2
},
renderItemActiveClass: {
borderColor: 'green',
borderWidth: 2
},
renderItemContent: {
},
Could somebody please tell me what I'm doing wrong?
Add a height to both the flatlist. And also wrap your second flatlist within a seperate view. Here is an example:
return (
<View style={{ height: "100%" }}>
<View style={{ width: "100%" }}>
<AppHeader />
</View>
<View style={{ width: "100%" }}>
<View style={{ width: "70%", alignSelf: "center", flex: 1 }}>
<View style={{ height: 60, alignSelf: "center" }}>
<FlatList
data={this.getTodayDay()}
renderItem={this.renderItemDays}
keyExtractor={this.keyExtractor}
/>
</View>
<View style={{ height: 60, alignSelf: "center" }}>
<FlatList
data={this.getVisibleHours()}
renderItem={this.renderItem}
keyExtractor={this.keyExtractor}
scrollEnabled={true}
/>
</View>
</View>
</View>
</View>
);

Using a variable for a createDrawerNavigation

I am working on a simple React Native e-commerce app and i ran into a issue. I am trying to add the option to change the language, and it has worked so far with the Redux but now i need to dynamically change the sidebar menu and I cant because it is hardcoded as a prop.The code for the menu is this.
const ShopNavigator = createDrawerNavigator(
{
Produktetee: ProductsNavigator,
Rezervimet: OrdersNavigator,
Postoni: AdminNavigator},
{
contentOptions: {
activeTintColor: MyColors.primary
},
contentComponent: props => {
const {log_out} = useSelector(state => state.language)
const dispatch = useDispatch();
return (
<View style={{ flex: 1, paddingTop: 50 }}>
<SafeAreaView forceInset={{ top: "always", horizontal: "never" }}>
<DrawerItems {...props} />
<Button
title={log_out}
color={MyColors.primary}
onPress={() => {
dispatch(authActions.logOut());
// props.navigation.navigate("Auth");
}}
/>
<View style={{flexDirection: 'row'}}>
<View style={{flex:1 , marginRight:10, marginTop: 5,}} >
<Button
title="English"
type="outline"
color={MyColors.primary}
onPress={()=>{
dispatch(index.selectLanguage(languages.english))
}}
/>
</View>
<View style={{flex:1, marginTop: 5,}} >
<Button
title="Shqip"
type="outline"
color={MyColors.primary}
onPress={()=>{
dispatch(index.selectLanguage(languages.albanian))
}}
/>
</View>
</View>
</SafeAreaView>
</View>
);
}
}
);
I am trying to use the hook, but I can't. If somebody could help me I would be very grateful.

How can I collapse Item pressed on arrays - react native?

I have a list of cards,
when pressed to any of them, I want to Increase hight for that card,
So I use layoutAnimation to handle this case because when I use Animated API from RN, I got an error when setNativeDrive "height"
Anyway,
In my case, it increases height for every card in the list,
So how can I solve it?
Code snippet
Live Demo
const OpenedAppointments = ({slideWidth}) => {
const [currentIndex, setCurrentIndex] = React.useState(null);
const [cardHeight, setCardHeight] = useState(140);
const collapseCard = (cardIndex) => {
setCurrentIndex(cardIndex);
currentIndex === cardIndex
? (LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut),
Animated.spring(),
setCardHeight(200))
: (LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut),
Animated.spring(),
setCardHeight(140));
};
const renderItems = (item, index) => {
return (
<TouchableOpacity
delayPressIn={0}
onPress={() => collapseCard(index)}
key={item.id}>
<Animated.View
style={[
styles.itemContainer,
{
height: cardHeight,
},
]}>
<View style={styles.headerContainer}>
<View style={styles.imgContainer}>
<Image
resizeMode="cover"
style={styles.img}
source={{uri: item.vendorInfo.vendorImg}}
/>
</View>
<View style={{width: '80%'}}>
<View style={styles.titleContainer}>
<Text numberOfLines={1} style={styles.vendorName}>
{item.vendorInfo.name}
</Text>
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<Text style={styles.rateText}>{item.vendorInfo.rate}</Text>
<AntDesign name="star" size={18} color="#262626" />
</View>
</View>
<View style={styles.socialContainer}>
<View
style={{
width: 32,
height: 32,
backgroundColor: '#000',
borderRadius: 5,
}}
/>
</View>
</View>
</View>
<View style={styles.footer}>
<Text style={styles.serviceName}>
{item.serviceName}
</Text>
<Text style={styles.price}>
{item.price}
</Text>
</View>
// this will appeared when pressed to card "Footer Card"
<View>
<View style={styles.line} />
<View style={styles.editFooter}>
<View style={styles.dateContainer}>
<MemoCalender
style={styles.calenderIcon}
size={26}
color="#000"
/>
<View style={styles.dateBox}>
<Text style={styles.dateText}>{item.date}</Text>
<Text style={styles.dateText}>{item.time}</Text>
</View>
</View>
</View>
</View>
</Animated.View>
</TouchableOpacity>
);
};
return(
<>
{Data.opened.map((item, index) => renderItems(item, index))}
</>
);
}
Change this:
<Animated.View
style={[
styles.itemContainer,
{
height: cardHeight,
},
]
>
{...}
</Animated.View>
by
<Animated.View
style={[
styles.itemContainer,
{
height: currentIndex === index ? cardHeight : 140,
},
]
>
{...}
</Animated.View>
If you want to be more efficient, the default height of your card, define it in a constant (ex: const = DEFAULT_CARD_HEIGHT = 140) and use this constant wherever you use 140 as card height

not able to map array value in react native

I am getting below value in the props "ticketDetailsInfo" and after that I am taking followupDetails array ,below is the value of followupDetails which is coming from server . ,but when amd doing maping followupDetails.map() its throwing error followupDetails.map() is not a function . While I have to take array value and display in ui . Please correct me where I am going wrong .
// Array Value is
const{ticketDetailsInfo}=this.props
const{troubleTicketDetails,workFlowDetails,followupDetails} =ticketDetailsInfo;
"followupDetails": [
{
"INCIDENTNUMBER": "16739",
"INCIDENTINITIATOR": "U",
"INCIDENTTIMESTAMP": "06/06/2019 16:25:36",
"NOTES": "Test",
"USERID": "597",
"STATUSUPDATED": null,
"USERGROUPNAME": "clmui",
"BINARYOBJECT": "N"
},
{
"INCIDENTNUMBER": "16738",
"INCIDENTINITIATOR": "E",
"INCIDENTTIMESTAMP": "06/06/2019 16:25:36",
"NOTES": "Test",
"USERID": "597",
"STATUSUPDATED": null,
"USERGROUPNAME": "clmui",
"BINARYOBJECT": "N"
}
],
import React, { Component } from 'react';
import { ImageBackground, ScrollView } from 'react-native';
import { Body, Button, Card, CardItem, Text, View } from 'native-base';
import styles from '../requestTab/TroubleTicketDetails.style';
import Header from '../../ui/header';
import BG from '../../../images/bg.jpg';
import { IconNormal } from '../../ui/icons';
import _ from 'lodash';
import { RegularText, SmallText } from '../../ui/text';
import StepIndicator from 'react-native-step-indicator';
import LoadingSpinner from '../../ui/spinner';
class TroubleTicketDetails extends Component {
constructor(props) {
super(props);
const {MSISDN,ticketDetailsInfo} = this.props;
this.state = {
title: 'Trouble Ticket',
icon: "sim",
mobile: MSISDN,
StepsVaue:[],
Steplabels:[],
currentStepPosition:[],
SteplabelconcatValue:[],
SteplabelsTimes:[]
};
}
iconSymbol = (priority) => {
let symbol = '';
let color = '';
if (priority === '10') {
symbol = 'exclamation';
color = 'red';
} else if (priority === '1') {
symbol = 'arrowdown';
color = 'white';
} else {
symbol = '';
color = '';
}
return { symbol: symbol, color: color };
};
componentDidMount() {}
componentDidUpdate(prevProps, prevState, snapshot) {}
componentDidCatch(error, errorInfo) {
console.log("TroubleTicketHistory Error", error);
console.log("TroubleTicketHistory ErrorInfo", errorInfo);
}
loadScreen() {
//RedirectScreen(this.props.navigation, 'SimSwap', this.state);
}
renderLabel = ({ position, stepStatus, SteplabelsTimes, currentPosition }=this.state) => {
return (
<Text
style={
position === currentPosition ? styles.stepLabelSelected : styles.stepLabel
}
>
{SteplabelsTimes}
</Text>
)
}
render() {
let { title, mobile, icon, currentStepPosition, Steplabels } = this.state;
let { navigation,ticketDetailsInfo,referenceNumber,TICKET_TYPE_DESCRIPTION,priority, currentStatus,convertedDate } = this.props;
const{troubleTicketDetails,workFlowDetails,followupDetails} =ticketDetailsInfo;
console.log("followupDetails" , followupDetails)
StepsVaue = workFlowDetails.currentNextActivity;
Steplabels = StepsVaue.map(StepsVaue => {
return StepsVaue._activityName;
});
SteplabelsTimes = StepsVaue.map(StepsVaue => {
return StepsVaue._maxHoldTime;
});
// SteplabelconcatValue = StepsVaue.map(StepsVaue => {
// return StepsVaue._activityName.concat("_",StepsVaue._maxHoldTime);
// });
currentStepPosition = StepsVaue.filter((item) => {
return item._activityStatus === "I"
});
const stepIndicatorStyles = {
stepIndicatorSize: 30,
currentStepIndicatorSize:40,
separatorStrokeWidth: 1,
currentStepStrokeWidth: 5,
stepStrokeCurrentColor: '#fe7013',
separatorFinishedColor: 'black',
separatorUnFinishedColor: 'black',
stepIndicatorFinishedColor: 'green',
stepIndicatorUnFinishedColor: '#aaaaaa',
stepIndicatorCurrentColor: '#ffffff',
stepIndicatorLabelFontSize: 0,
currentStepIndicatorLabelFontSize: 0,
stepIndicatorLabelCurrentColor: '#000000',
stepIndicatorLabelFinishedColor: '#ffffff',
stepIndicatorLabelUnFinishedColor: 'rgba(255,255,255,0.5)',
labelColor: 'black',
labelSize: 15,
currentStepLabelColor: 'black'
}
if(!_.isEmpty(referenceNumber) && (StepsVaue[0])) {
return (
<ImageBackground source={BG} style={styles.imgBG}>
<ScrollView>
<View style={styles.container}>
<View>
<Header title={title} subtitle={mobile} icon={icon} navigation={navigation}/>
</View>
<View style={styles.contentContainer}>
<View style={{ padding: 10 }}>
<View style={{marginBottom: 10}}>
<Card>
<CardItem header style={{backgroundColor: '#23476B', width: '100%', justifyContent: 'space-between'}}>
<View style={{flexDirection:'column'}}>
<View>
<RegularText text={`${TICKET_TYPE_DESCRIPTION} ID : ${referenceNumber}`} textColor='#fff' style={{ fontWeight: 'bold' }}/>
</View>
<View>
<SmallText text={`Raised ${convertedDate}`} textColor="#fff"/>
</View>
</View>
<View style={{flexDirection:'row'}}>
<View style={{flexDirection:'row'}}>
<IconNormal icon={this.iconSymbol(priority).symbol} type="AntDesign" style={{ color: this.iconSymbol(priority).color , paddingTop: 5}}/>
</View>
{/* <IconNormal icon={this.iconSymbol(priority).symbol} type="AntDesign" style={{ color: this.iconSymbol(priority).color , paddingTop: 5}}/> */}
<View style={{backgroundColor:'orange', borderRadius:50,height: 28, paddingRight: 10, paddingLeft: 10, paddingTop: 5}}>
<SmallText text={`${currentStatus}`} textColor='white'/>
</View>
</View>
</CardItem>
<CardItem>
<Body>
<View style={{flexDirection:'row', justifyContent: 'space-between', width: '100%'}}>
{/* <View style={{flexDirection:'column'}}>
<View>
<SmallText text="Catagory" textColor="grey"/>
</View>
<View>
<Text style={{ fontWeight: 'bold', fontSize:14 }}>{troubleTicketDetails.cat1}</Text>
</View>
</View> */}
{troubleTicketDetails.cat2.length > 0 &&
<View style={{flexDirection:'column'}}>
<View>
<SmallText text="Sub-Category" textColor="grey"/>
</View>
<View>
<Text style={{ fontWeight: 'bold', fontSize:14 }}>{troubleTicketDetails.cat2}</Text>
</View>
</View>}
{troubleTicketDetails.cat3.length > 0 &&
<View style={{flexDirection:'column'}}>
<View>
<SmallText text="Sub-SubCategory" textColor="grey"/>
</View>
<View>
<Text style={{ fontWeight: 'bold', fontSize:14 }}>{troubleTicketDetails.cat3}</Text>
</View>
</View>}
</View>
</Body>
</CardItem>
</Card>
</View>
<View>
<RegularText text={`WORKFLOW`} textColor='grey' style={{ fontWeight: 'bold', textAlign:'center', marginBottom:10 }}/>
</View>
<View style={{borderWidth:1, borderColor:'lightgrey', borderBottomColor:'white', padding:10, flexDirection:'column'}}>
<Card>
<CardItem>
<Body style={{justifyContent: 'center', alignItems: 'center'}}>
<View style={{flexDirection:'column'}}>
<RegularText text={` ${workFlowDetails.WRKFLW_DESC_V}`} textColor='green' style={{ fontWeight: 'bold' }}/>
</View>
<View style={{flexDirection:'column'}}>
<SmallText text={`Time Remaining is ${workFlowDetails.ESTIMATED_RESOLN_TM_N} Hours`} textColor='green' style={{ fontWeight: 'bold' }}/>
</View>
</Body>
</CardItem>
</Card>
</View>
<View style={{paddingLeft:10, height:300, marginBottom:10, borderWidth:1, borderColor:'lightgrey', borderTopColor:'white'}}>
<StepIndicator
customStyles={stepIndicatorStyles}
currentPosition={currentStepPosition.length}
stepCount={Steplabels.length}
labels={Steplabels}
renderLabel ={this.renderLabel()}
direction="vertical"
/>
</View>
<View>
<RegularText text={`NOTES`} textColor='grey' style={{ fontWeight: 'bold', textAlign:'center', marginBottom:10 }}/>
</View>
<View style={{marginLeft:10,marginRight:10}}>
{Array.isArray(followupDetails) && followupDetails.map(
({ INCIDENTINITIATOR, INCIDENTTIMESTAMP,NOTES, USERGROUPNAME}, index) => {
var INCIDENTINITIATOR_Value;
if(INCIDENTINITIATOR =="U"){
INCIDENTINITIATOR_Value ="USER";
}
else{
INCIDENTINITIATOR_Value ="CUSTOMER";
}
<View style={{marginBottom: 10}} key={index}>
<Card>
<CardItem header style={{backgroundColor: '#fff', justifyContent: 'space-between', borderBottomColor: '#f1f1f1', borderBottomWidth: 1}}>
<View style={{flexDirection:'column'}}>
<View style={{backgroundColor:'lightgrey', borderRadius:50,height: 28, paddingRight: 10, paddingLeft: 10, paddingTop: 5}}>
<SmallText text={`${INCIDENTINITIATOR_Value}`} textColor='grey'/>
</View>
<View>
<Text style={{ fontSize:14 }}> {NOTES} </Text>
</View>
</View>
</CardItem>
<CardItem>
<Body>
<View style={{flexDirection:'row', justifyContent: 'space-between', width: '100%'}}>
<View>
<SmallText text={`${USERGROUPNAME}`} textColor="grey"/>
</View>
<View>
<SmallText text={`${INCIDENTTIMESTAMP}`} textColor="grey"/>
</View>
</View>
</Body>
</CardItem>
</Card>
</View>
})
}
</View>}
{/* <Button block bordered dark>
<Text>Add a Note</Text>
</Button> */}
</View>
</View>
</View>
</ScrollView>
</ImageBackground>
);
}else{
return(
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<LoadingSpinner color="#00678F"/>
</View>
)
}
}
}
/*<IconNormal icon={this.iconSymbol(priority).symbol} type="AntDesign" style={{ color: this.iconSymbol(priority).color , paddingTop: 5}}/> */
export default TroubleTicketDetails;
Thanks

React Native Register Button issue

In the React Native application, the button continues to operate when the information is entered incorrectly on the member entry and registration page. The button is not activated again to re-enter information. Could you help?
In other words, when the information is entered incorrectly or missing, the registration button is rotating continuously.
Please review the screenshot and codes.
Screenshot:
[![Screen shot with the UI][1]][1]
My codes are:
import React from 'react';
import { StyleSheet, Text, View, Image, Dimensions, TextInput, TouchableOpacity, ActivityIndicator } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import Icon from 'react-native-vector-icons/Ionicons';
const { height, width } = Dimensions.get('window');
const LogoImg = require('../assets/img/challengelogo.png');
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scrollview'
import {connect} from 'react-redux';
import * as appActions from './actions';
export class signupView extends React.Component {
constructor(props){
super(props);
this.state = {
checkboxChecked: false,
checkboxIcon: 'ios-square-outline'
}
}
render() {
const { container, innerContainer, innerImageContainer, buttonView , buttonViewRegister, innerButtonTextView, innerButtonView, termsView} = styles;
return (
<LinearGradient
colors={['#f9a149', '#e86e52', '#d6375c']}
style={ container }>
<KeyboardAwareScrollView
showsVerticalScrollIndicator={false}
keyboardShouldPersistTaps="always"
style={styles.scrollContainer}>
<View style={innerContainer}>
<Image
source={LogoImg}
style={{ width: width*0.45, height: width*0.55 }}
resizeMode={'contain'}
/>
<View style={{flexDirection:'row', alignItems:'center'}}>
<Text style={{color:'#fff', fontSize:18, margin:10, textDecorationLine:'underline'}} >KAYIT OL</Text>
</View>
<View style={styles.searchSection}>
<Icon style={styles.searchIcon} name="ios-person-add" size={30} color="#000"/>
<TextInput
style={styles.input}
placeholder="Kullanıcı Adı"
underlineColorAndroid="transparent"
autoCapitalize = 'none'
autoCorrect = {false}
value = {this.props.r_name}
onChangeText={this._onNameChanged.bind(this)}
autoFocus = { true }
blurOnSubmit = { false }
returnKeyType = { "next" }
onSubmitEditing = {() => {this.mailTextInput.focus()} }
/>
</View>
<View style={styles.searchSection}>
<Icon style={styles.searchIcon} name="ios-mail-outline" size={30} color="#000"/>
<TextInput
ref={(input) => { this.mailTextInput = input; }}
style={styles.input}
placeholder="Mail Adresi"
underlineColorAndroid="transparent"
keyboardType="email-address"
autoCapitalize = 'none'
autoCorrect = {false}
value = {this.props.r_email}
onChangeText={this._onEmailChanged.bind(this)}
blurOnSubmit = { false }
returnKeyType = { "next" }
onSubmitEditing = {() => {this.passwordTextInput.focus()} }
/>
</View>
<View style={styles.searchSection}>
<Icon style={styles.searchIcon} name="md-lock" size={30} color="#000"/>
<TextInput
ref={(input) => { this.passwordTextInput = input; }}
style={styles.input}
placeholder="Şifre"
onChangeText={(searchString) => {this.setState({searchString})}}
underlineColorAndroid="transparent"
secureTextEntry={true}
autoCapitalize = 'none'
autoCorrect = {false}
value = {this.props.r_password}
onChangeText={this._onPasswordChanged.bind(this)}
/>
</View>
{ !this.props.isloadingSignup &&
<TouchableOpacity onPress={this._onSignUpPress}>
<View style={ [buttonView, buttonViewRegister]}>
<View style={innerButtonView}>
<Icon name="ios-person-add" size={30} color="#000" />
</View>
<View style={innerButtonTextView}>
<Text style={{ color:'#FFF', fontSize: 15}}>Kayıt Ol</Text>
</View>
</View>
</TouchableOpacity>
||
<TouchableOpacity>
<View style={ [buttonView, buttonViewRegister]}>
<View style={innerButtonView}>
<Icon name="ios-person-add" size={30} color="#000" />
</View>
<View style={innerButtonTextView}>
<ActivityIndicator color="white" size='small' />
</View>
</View>
</TouchableOpacity>
}
<TouchableOpacity onPress={this._onPressTerms}>
<View style={ [termsView]}>
<Icon name={this.state.checkboxChecked ? 'ios-checkbox': 'ios-square-outline'} size={30} color="#000" />
<Text style={{ color:'#FFF', fontSize: 15, marginLeft: 10}}><Text onPress={this._onPressTermsConditions } style={{ textDecorationLine: "underline"}}> Kullanım koşullarını</Text> Kabul Ediyorum.</Text>
</View>
</TouchableOpacity>
</View>
</KeyboardAwareScrollView>
</LinearGradient>
);
}
_onSignUpPress = () => {
if(this.state.checkboxChecked) {
var registerBody = {
email: this.props.r_email,
password: this.props.r_password,
password_confirmation: this.props.r_password,
name: this.props.r_name
};
this.props.dispatch(appActions.register(registerBody));
} else {
alert("Lütfen önce Kullanıcı şartlarını kabul edin.");
}
}
_onEmailChanged = (email) => {
this.props.dispatch(appActions.emailChanged(email));
}
_onNameChanged = (name) => {
this.props.dispatch(appActions.nameChanged(name));
}
_onPasswordChanged = (password) => {
this.props.dispatch(appActions.passwordChanged(password));
}
_onPressTerms = () => {
this.setState({ checkboxChecked: !this.state.checkboxChecked })
}
_onPressTermsConditions = () => {
this.props.navigator.push({
screen: 'challenge.TermsOfUse',
navigatorStyle: {
navBarHidden: true
}
});
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'flex-start',
},
scrollContainer:{
flex: 1,
},
innerContainer:{
flexDirection:'column',
alignItems:'center',
marginTop: height*0.08,
},
searchSection: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
width:width*0.7,
marginTop:7
},
searchIcon: {
paddingTop:5,
paddingBottom:5,
paddingLeft:10,
paddingRight:10
},
input: {
flex: 1,
backgroundColor: '#fff',
color: '#424242',
justifyContent:'center',
},
buttonView:{
width: width*0.7,
marginTop:20,
flexDirection:'row',
},
buttonViewRegister:{
backgroundColor:"#2b74a7"
},
innerButtonView:{
backgroundColor:'#bab9b9',
width:45,
height:42,
justifyContent:'center',
alignItems:'center'
},
innerButtonTextView:{
flex:1,
justifyContent:'center',
alignItems:'center'
},
termsView:{
width: width*0.8,
marginTop:20,
flexDirection:'row',
justifyContent:'center',
alignItems:'center'
}
});
const mapStateToProps = ({ signup }) => {
return { r_email, r_password, r_name, isloadingSignup } = signup;
};
export default connect(mapStateToProps)(signupView);
Firstly, thanks for your response. I couldn't put the codes here because it crossed the character limit. So you can review the action content from this link. http://karahankaraman.com/actions/index.js
I think you are overcomplicating your signup page. Do you really need to dispatch to redux to handle your signup logic? You might need to show us your actions.js file if this continues.
Meanwhile do this:
{ !this.props.isloadingSignup ?
<TouchableOpacity onPress={this._onSignUpPress}>
<View style={ [buttonView, buttonViewRegister]}>
<View style={innerButtonView}>
<Icon name="ios-person-add" size={30} color="#000" />
</View>
<View style={innerButtonTextView}>
<Text style={{ color:'#FFF', fontSize: 15}}>Kayıt Ol</Text>
</View>
</View>
</TouchableOpacity>
:
<View style={ [buttonView, buttonViewRegister]}>
<View style={innerButtonView}>
<Icon name="ios-person-add" size={30} color="#000" />
</View>
<View style={innerButtonTextView}>
<ActivityIndicator color="white" size='small' />
</View>
</View>
}

Categories