How to use secureTextEntry in tcomb-form-native? - validation

I am using tcomb-form-native version 0.6.15 for form validation in react-native Version0.55.4 . When I use password field text should be hidden inside dots. As per docs I used secureTextEntry and set it to true but it is still showing the data like a simple text. I found some suggestion to use temple but i don't know how to use them.
Below is the Form code
const Form = t.form.Form;
t.form.Form.stylesheet.controlLabel.normal = {color: 'white'}
console.log(t.form.Form.options)
const User = t.struct({
name: t.String,
email: t.String,
password: t.String,
});
const formStyles = {
...Form.stylesheet,
formGroup: {
normal: {
marginBottom: 10,
color: 'white'
},
},
controlLabel: {
normal: {
fontSize: 12,
marginBottom: 7,
fontWeight: '600',
},
// the style applied when a validation error occours
error: {
color: 'red',
fontSize: 18,
marginBottom: 7,
fontWeight: '600',
},
},
};
const options = {
order: ['name', 'email', 'password' ],
fields: {
name: {
placeholder: 'Enter Name',
error: 'Name is empty?',
},
email: {
placeholder: 'Enter Email',
error: 'Email is empty?',
},
password: {
placeholder: 'Enter Password',
error: 'Password is empty?',
secureTextEntry: true,
template: (locals) => textbox(locals, )//here i can use template but don't know how
},
},
stylesheet: formStyles,
};
class SignupScreen extends Component{
static navigationOptions = {
header: null
};
constructor(props) {
super(props);
this.state = {
name: '',
email: '',
password: '',
dateOfBirth: '',
};
}
onSubmit(){
const value = this._form.getValue();
console.log('value: ', value);
}
render(){
console.log(this.state.dateOfBirth)
return(
<ImageBackground
source={require('../../images/splash_screen.jpg')}
style={{flex: 1}}
>
<View style={styles.container}>
<View style={{flex:3, justifyContent: 'center', alignItems: 'center'}}>
<Image source={require('../../images/big_transparent_logo.png')} />
<Text style={styles.subtitleStyle}>Get free drink everyday</Text>
</View>
<View style={{ flex: 7, justifyContent: 'flex-start', alignSelf: 'center', alignItems: 'center', width: '80%'}}>
<View style={{width: '100%', paddingHorizontal: 10, paddingVertical: 10 , backgroundColor: 'rgba(0,0,0,0.6)'}}>
<Form ref={c => (this._form = c)} type={User} />
<TouchableOpacity style={{width: '100%', marginVertical: 10}} >
<Label title="BIRTHDAY" />
<DatePicker
style={{width: '100%'}}
date=''
mode="date"
placeholder={this.state.dateOfBirth}
format="DD-MM-YYYY"
maxDate="2002-06-01"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
showIcon={true}
androidMode='spinner'
customStyles={{
dateInput: {
marginLeft: 0,
borderWidth: 0,
textAlign: 'left',
color: 'white',
backgroundColor: '#f2f2f2',
paddingVertical: 0,
height: 30,
color: 'black'
}
// ... You can check the source to find the other keys.
}}
onDateChange={(date) => {this.setState({dateOfBirth: date})}}
/>
</TouchableOpacity >
<Button block bordered light
style={{ width: '47%', borderRadius: 5, alignSelf: 'center', height: 50}}
onPress={this.onSubmit.bind(this)}
>
<Text style={{color: 'white'}}>Sign Up</Text>
</Button>
<Button block light
style={{ width: '47%', borderRadius: 5, alignSelf: 'center', height: 50, backgroundColor: 'rgba(0,0,0,0)',}}
onPress={()=>this.props.navigation.goBack()}
>
<Text style={{color: 'white'}}>Back</Text>
</Button>
</View>
</View>
</View>
</ImageBackground>
);
}
}
export { SignupScreen };

Your form is not connected to the options variable. Call options in your form tag as in below.
<Form ref={c => (this._form = c)}
type={User}
options={options} //set form options
/>
It should work without a template.
password: {
password: true,
secureTextEntry: true}
}

Related

Using FlatList to display custom card elements and need to make them touchable

I need to make the list of items touchable in a flatlist, but have no idea how to make the individual components touchable so i can access the id of that flatlist item. I need to handle the onPress so I can use react navigation 5 to send the users to a different screen.
I'm using an array of data to create a card like component that renders in the flatlist.
how do I make the individual list items touchable?
here's what I'm working with:
import * as React from "react";
import { View, StyleSheet, FlatList, SafeAreaView } from "react-native";
import BigButton from "../components/BigButton.js";
import HomeScreenImage from "../components/HomeScreenImage.js";
import HomeCard from "../components/Card";
const homeOptions = [
{
name: "Beast shedule",
body: "Create and manage your workout shedule",
image: require("../assets/images/DoubleBis.jpg"),
id: "1",
},
{
name: "Pre-Made Workouts",
body: "Use one of our pre-made workouts",
image: require("../assets/images/ChickA.jpg"),
id: "2",
},
{
name: "Statistics",
body: "Analyse your personal statistics",
image: require("../assets/images/WorkoutInProgress.jpg"),
id: "3",
},
{
name: "History",
body: "Keep track of your workout history",
image: require("../assets/images/ChickH.jpg"),
id: "4",
},
];
const HomeScreen = (props) => {
return (
<View style={Styles.containerTop}>
<View>
<HomeScreenImage style={Styles.top} />
<View style={Styles.top}>
<BigButton title="Train & Track" />
</View>
</View>
<SafeAreaView style={Styles.flatListContainer}>
<FlatList
data={homeOptions}
renderItem={({ item }) => {
return <HomeCard info={item} />;
}}
keyExtractor={(homeOption) => homeOption.id}
showsVerticalScrollIndicator={false}
/>
</SafeAreaView>
</View>
);
};
const Styles = StyleSheet.create({
containerTop: {
flex: 1,
backgroundColor: "#3E3636",
},
top: {
flex: 1,
height: "1%",
alignItems: "center",
justifyContent: "center",
},
flatListContainer: {
flex: 1,
},
});
export default HomeScreen;
import React from "react";
import { View, Text, StyleSheet, Dimensions, Image } from "react-native";
const HomeCard = (props) => {
return (
<View style={Styles.container}>
<View style={Styles.cardContainer}>
<Image style={Styles.imageStyle} source={props.info.image} />
<View style={Styles.infoStyle}>
<Text style={Styles.titleStyle}>{props.info.name}</Text>
<Text style={Styles.bodyTextStyle}>{props.info.body}</Text>
</View>
</View>
</View>
);
};
const deviceWidth = Math.round(Dimensions.get("window").width);
const offset = 25;
const radius = 20;
const Styles = StyleSheet.create({
container: {
width: deviceWidth - 20,
marginTop: 20,
},
cardContainer: {
margin: 10,
width: deviceWidth - offset,
backgroundColor: "#000",
height: 200,
borderRadius: radius,
shadowColor: "#000",
shadowOffset: {
width: 5,
height: 5,
},
shadowOpacity: 0.75,
shadowRadius: 5,
elevation: 3,
},
imageStyle: {
height: 130,
width: deviceWidth - 25,
borderTopLeftRadius: radius,
borderTopRightRadius: radius,
opacity: 0.95,
},
titleStyle: {
color: "#F5EDED",
textAlign: "center",
fontSize: 20,
fontWeight: "800",
},
bodyTextStyle: {
fontWeight: "200",
color: "#F5EDED",
textAlign: "center",
},
infoStyle: {
marginHorizontal: 10,
marginVertical: 1,
},
});
export default HomeCard;
You can wrap your card with some touchable component, like TouchableOpacity for example, with naviagtion.navigate('routeName', {params}) function on onPress prop.
const HomeCard = (props) => {
return (
<TouchableOpacity onPress={() => navigation.navigate('ReceiverRoute', {image: props.info image, name: props.info.name })}> ///etc any parameters you want
<View style={Styles.container}>
<View style={Styles.cardContainer}>
<Image style={Styles.imageStyle} source={props.info.image} />
<View style={Styles.infoStyle}>
<Text style={Styles.titleStyle}>{props.info.name}</Text>
<Text style={Styles.bodyTextStyle}>{props.info.body}</Text>
</View>
</View>
</View>
</TouchableOpacity>
);
};
and then you navigate to a component that can receive some params.
For a cleaner example you can look into docs. The main idea is just wrapping your card into some touchable with onpress navigation. For the navigation prop, you can either pass it to your card from parent component, or use useNavigation hook

The component for route app must be a react component

I have below code base
Getting this error
The component for route app must be a react component
I saw many questions like this on SO, and solutions there but being a beginner not able to resolve yet, tried with adding export / export default with each class
but not working
https://snack.expo.io/#mparvez19861/drawer-navigation?session_id=snack-session-hyLuO4xPa
import React, { Component } from 'react';
import { View, Text, TouchableHighlight, Image } from 'react-native';
import { createDrawerNavigator } from 'react-navigation';
import {
ActivityIndicator,
AsyncStorage,
Button,
StatusBar,
StyleSheet
} from 'react-native';
import { createStackNavigator, createSwitchNavigator, createAppContainer } from
'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons'
class HeaderNavigationBar extends Component {
render() {
return (
<View style={{
height: 70,
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center'
}}>
<TouchableHighlight style={{ marginLeft: 10, marginTop: 15 }}
onPress={() => { this.props.navigation.openDrawer() }}>
{/* <Image
style={{ width: 32, height: 32 }}
source={{uri: 'https://png.icons8.com/ios/2x/menu-filled.png'}}
/> */}
<Icon name='md-menu' size={35} />
</TouchableHighlight>
</View>
);
}
}
export class HomeScreen extends Component {
render() {
return (
<View style={{
flex: 1,
flexDirection: 'column',
}}>
<HeaderNavigationBar {...this.props} />
<View style={{
flex: 1,
backgroundColor: '#4885ed',
alignItems: 'center',
justifyContent: 'center'
}}>
<Text style={{ fontWeight: 'bold', fontSize: 22, color: 'white' }}>
This is Home Screen
</Text>
</View>
</View>);
}
}
export class InfoScreen extends Component {
render() {
return (<View style={{
flex: 1,
flexDirection: 'column',
}}>
<HeaderNavigationBar {...this.props} />
<View style={{
flex: 1,
backgroundColor: '#4734ac',
alignItems: 'center',
justifyContent: 'center'
}}>
<Text style={{ fontWeight: 'bold', fontSize: 22, color: 'white' }}>
This is Info Screen
</Text>
</View>
</View>);
}
}
class SignInScreen extends React.Component {
static navigationOptions = {
title: 'Please sign in',
};
render() {
return (
<View style={styles.container}>
<Button title="Sign in!" onPress={this._signInAsync} />
</View>
);
}
_signInAsync = async () => {
await AsyncStorage.setItem('userToken', 'abc');
this.props.navigation.navigate('App');
};
}
class AuthLoadingScreen extends React.Component {
constructor() {
super();
this._bootstrapAsync();
}
// Fetch the token from storage then navigate to our appropriate place
_bootstrapAsync = async () => {
const userToken = await AsyncStorage.getItem('userToken');
// This will switch to the App screen or Auth screen and this loading
// screen will be unmounted and thrown away.
this.props.navigation.navigate(userToken ? 'App' : 'Auth');
};
// Render any loading content that you like here
render() {
return (
<View style={styles.container}>
<ActivityIndicator />
<StatusBar barStyle="default" />
</View>
);
}
}
const AuthStack = createStackNavigator({ SignIn: SignInScreen });
const drNav = createDrawerNavigator(
{
Home: {
screen: HomeScreen
},
Info: {
screen: InfoScreen
}
}
)
export default createAppContainer(createSwitchNavigator(
{
AuthLoading: AuthLoadingScreen,
App: drNav,
Auth: AuthStack,
},
{
initialRouteName: 'AuthLoading',
}
));
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
Any help appreciated
Thanks

How to remove transparency on stack navigator?

I have created a react native project using react navigation.I have put a picture as a ImageBackground in root component.In android it works fine but in iOS it shows the root component background image but with transparent stack navigators.
<SafeAreaView style={{ flex: 1 }}>
<ImageBackground
source={Assets.bgImage}
style={{
width: '100%',
height: '100%'
}}
>
<Wrapper>{children}</Wrapper>
</ImageBackground>
</SafeAreaView>
{
initialRouteName: 'SignIn',
mode: 'card',
headerMode: 'none',
transparentCard: true,
transitionConfig: () => ({
containerStyle: {
backgroundColor: 'transparent'
}
}),
/* The header config from HomeScreen is now here */
defaultNavigationOptions: {
headerStyle: {
backgroundColor: 'transparent'
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
fontSize: 15
}
}
}
anyone has idea about this issue?

Overlapping and Positioning Elements in React Native

I'm trying to overlap elements as shown in the wireframe, as well as position them.
I've tried
- position: 'relative' and the element disappears
- position: 'absolute' but alignItems: 'center' does nothing
Can anyone help identify what's missing?
Wireframe of Wishlist (ignore the different header; it was from an old version)
This is what I get instead, even after using flex
I've attached code from all the separate .js files, and left out all import and export statements.
Thank you!
----------- in WishlistDetail.js------------
// Each Item on The Wishlist
const WishlistDetail = () => {
return (
<View>
<WishlistCard>
<WishlistThumbnail />
<WishlistThumbnailFilter />
<WishlistPrice />
<WishlistItemDetail />
</WishlistCard>
</View>
);
};
---------- in WishlistCard.js------------------
// Creating WishlistCard
const WishlistCard = (props) => {
return (
<View style={styles.containerStyle}>
{props.children}
</View>
);
};
// WishlistCard Style
const styles = StyleSheet.create({
containerStyle: {
borderWidth: 0.75,
backgroundColor: 'white',
borderColor: 'rgb(217, 217, 217)',
height: 125 // ******* not too sure
}
});
---------- in WishlistThumbnail.js------------------
const WishlistThumbnail = () => {
const { wishlistThumbnailStyle } = styles;
return (
<View>
<Image
style={wishlistThumbnailStyle}
source={{ uri: 'http://www.startwire.com/job-applications/logos/amazon.png' }}
/>
</View>
);
};
// All Styling
const styles = StyleSheet.create({
wishlistThumbnailStyle: {
height: 95,
width: 95,
padding: 20,
position: 'absolute',
justifyContent: 'center'
}
});
---------- in WishlistThumbnailFilter.js------------------
// Creating Wishlist Thumbnail Filter
const WishlistThumbnailFilter = () => {
return (
<View style={styles.wishlistThumbnailFilterStyle} />
);
};
// Image Filter Style - 146 125 192.2
const styles = StyleSheet.create({
wishlistThumbnailFilterStyle: {
width: 160,
borderTopColor: 'rgba(13, 13, 13, 0.05)',
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
borderTopWidth: 250,
borderLeftWidth: 0,
borderRightWidth: 90
}
});
---------- in WishlistPrice.js------------------
const WishlistPrice = () => {
const { textStyle, viewStyle } = styles;
return (
//INSERT PRICE HERE
<View style={viewStyle}>
<Text style={textStyle}>30€</Text>
</View>
);
};
// Wishlist Price Style
const styles = StyleSheet.create({
viewStyle: {
backgroundColor: 'transparent',
padding: '3',
// alignItems: 'flex-end',
justifyContent: 'flex-end',
position: 'absolute'
// position: 'relative'
},
textStyle: {
fontSize: 11.5,
fontFamily: 'Bariol_Regular',
color: 'rgb(127, 127, 127)'
}
});
---------- in WishlistItemDetail.js------------------
// This contains both Wishlist Title and Wishlist Text
const WishlistItemDetail = () => {
const { wishlistItemDetailStyle, wishlistItemTitleStyle, wishlistItemTextStyle } = styles;
return (
<View style={wishlistItemDetailStyle}>
<Text style={wishlistItemTitleStyle}>Wishlist Item Title</Text>
<Text style={wishlistItemTextStyle}>Wishlist Item Text</Text>
</View>
);
};
// Header Style
const styles = StyleSheet.create({
wishlistItemDetailStyle: {
backgroundColor: 'transparent',
position: 'absolute',
padding: 5
},
wishlistItemTitleStyle: {
fontSize: 15,
fontFamily: 'Bariol_Regular',
color: 'rgb(51, 51, 51)'
},
wishlistItemTextStyle: {
fontSize: 12,
fontFamily: 'Bariol_Regular',
color: 'rgb(70, 70, 70)'
}
});
without wanting to go into too much detail, this seems to look like an issue of column vs row in you flexDirection.
In order to get the style of the wireframe you provided you need to use a combination of both row and column. Check out this documentation: https://facebook.github.io/react-native/docs/flexbox.html
So one row consists of two main views styled in a flexrow and the one I marked blue is styled in a column (which is the default).
Hope this helps

Sliding Animation with different background coming up, correct overlay

I'm trying to make a slider animation, like the one you get when you power off iOS on iPhones. This is what I have so far and it is self-contained.
import {PanResponder, View, Text, Dimension} from 'react-native';
const {width} = Dimension.get('window');
const TOTAL_WIDTH = width - 50;
class slider extends React.Component {
t = <Text>Slide to Export & Delete</Text>;
state = {
button_translate_x: 0
};
move_right(event, dx) {
if (dx > 0 && event.nativeEvent.pageX <= TOTAL_WIDTH) {
if (dx === width - 50) {
this.setState({button_translate_x: 0});
} else {
this.setState({button_translate_x: dx});
}
}
}
release_handler(e, gs) {
const diff = Math.abs(e.nativeEvent.pageX - TOTAL_WIDTH);
if (diff <= 5) {
this.setState({button_translate_x: gs.dx});
} else {
this.setState({button_translate_x: 0});
}
}
pan_responder = PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => true,
onPanResponderMove: (evt, gestureState) => {
this.move_right(evt, gestureState.dx);
},
onPanResponderRelease: (evt, gestureState) => {
this.release_handler(evt, gestureState);
}
});
smoothing_margin() {
if (this.state.button_translate_x <= 25)
return Math.abs(this.state.button_translate_x - 20);
else return 0;
}
render() {
return (
<View style={{alignItems: 'center'}}>
<View
style={{
alignItems: 'center',
borderRadius: 25,
width: TOTAL_WIDTH,
backgroundColor: 'orange'
}}>
<View
style={{
width: this.state.button_translate_x,
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
backgroundColor: 'blue',
borderRadius: 25,
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: -1,
marginVertical: this.smoothing_margin()
}}
/>
<View
style={{
position: 'absolute',
alignItems: 'center',
justifyContent: 'center',
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: -2
}}>
{this.t}
</View>
<View
style={{
alignSelf: 'flex-start',
width: 50,
transform: [{translateX: this.state.button_translate_x}],
height: 50,
borderRadius: 25,
backgroundColor: 'red'
}}
{...this.pan_responder.panHandlers}
/>
</View>
</View>
);
}
}
But this is wrong though because the initial slide has the blue coming out of the rounded bounds of the orange view. I have tried to be clever with this with marginVertical but not sure if that is the correct way to go about it.
Sliding all the way to the right is incorrect because the blue should be covering at least to the middle of the circle but as currently written only goes up to the left side.
Help appreciated.
Figured it out!
import {PanResponder} from 'react-native';
const TOTAL_WIDTH = width - 50;
class slider extends React.Component {
t = <Text>Slide to Export & Delete</Text>;
state = {button_translate_x: 0};
pan_responder = PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => true,
onPanResponderMove: (evt, {dx}) => {
if (dx > 0 && TOTAL_WIDTH - 50 >= dx) {
this.setState({button_translate_x: dx});
}
},
onPanResponderRelease: ({nativeEvent: {pageX}}, {dx}) => {
if (TOTAL_WIDTH - 50 - dx <= 5) {
console.log('Success zone');
} else {
this.setState({button_translate_x: 0});
}
}
});
render() {
return (
<View style={{alignItems: 'center'}}>
<View
style={{
alignItems: 'center',
borderRadius: 25,
width: TOTAL_WIDTH,
backgroundColor: 'orange'
}}>
<View
style={{
position: 'absolute',
alignItems: 'center',
justifyContent: 'center',
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: -2
}}>
{this.t}
</View>
<View
style={{
alignSelf: 'flex-start',
width: 50,
transform: [{translateX: this.state.button_translate_x}],
height: 50,
borderRadius: 25,
backgroundColor: 'red'
}}
{...this.pan_responder.panHandlers}
/>
<View
style={{
borderRadius: 25,
position: 'absolute',
top: 0,
bottom: 0,
right: 0,
left: 0,
backgroundColor: 'blue',
height: 50,
width: this.state.button_translate_x + 50,
zIndex: -1
}}
/>
</View>
</View>
);
}
}

Resources