Button background colour changing - plugins

I was trying to create an OTP screen with autofill functionality using the react-native-otp-inputs plugin. Everything is working fine, but when I try to add any button below this OTPInputs component the background colour of the button gets changed to a greyish one.
import React, {useEffect, useState, useRef, useCallback} from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
} from 'react-native';
import RNBootSplash from 'react-native-bootsplash';
import OtpInputs from 'react-native-otp-inputs';
export function AuthenticationScreen({navigation}) {
useEffect(() => {
RNBootSplash.hide({duration: 250});
});
const otpRef = useRef();
const focusOTP = useCallback(() => {
otpRef.current.focus();
}, []);
const resetOTP = useCallback(() => {
otpRef.current.reset();
}, []);
return (
<View style={{backgroundColor: 'white', flex: 1}}>
<OtpInputs
style={{
flexDirection: 'row',
justifyContent: 'space-between',
width: '100%',
paddingLeft: 30,
paddingRight: 30,
borderWidth: 1,
borderColor: 'blue',
}}
inputContainerStyles={{
borderWidth: 0,
borderBottomWidth: 1,
borderColor: 'black',
}}
inputStyles={{textAlign: 'center'}}
handleChange={(code) => console.log(code)}
numberOfInputs={6}
/>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
marginVertical: 40,
borderWidth: 1,
borderColor: 'red',
}}>
<TouchableOpacity
style={{
height: 50,
width: 100,
borderRadius: 20,
justifyContent: 'center',
alignItems: 'center',
}}>
<Text>Continue</Text>
</TouchableOpacity>
</View>
</View>
);
}
This happens only if the all the otp fields are filled. Please find the attached screenshot for a detailed view.
As you can see I haven't added any background colour to touchable opacity, still it is showing a grey colour after the otp inputs are filled. What may be the reason for this ?

Apparently when you end editing the OTP fields it changes the next touchable opacity.
As workaround you can add self enclosed touchable opacity with no width and height like this
<TouchableOpacity/>
And here is a full example with your code

Related

How to add responsive range to a mui class?

I have this following class in MUI4 and want to be able to apply margin in between 565-350px any idea how to put this in to one media query line ?
view: {
display: 'flex',
justifyContent: 'center',
flexWrap: 'wrap',
alignItems: 'center',
['#media (max-width: 565px)']: {
marginTop: 8,
},
['#media (max-width: 350px)']: {
marginTop: 0,
},
},
About your question, you can try to setting like this.
view: {
display: 'flex',
justifyContent: 'center',
flexWrap: 'wrap',
alignItems: 'center',
[theme.breakpoints.up(565)]: {
marginTop: 8,
},
[theme.breakpoints.up(350)]: {
marginTop: 8,
}
},

useStyles not working as it should in mui5?

I am trying to custom style my icon adding a bigger font size, the background is working fine but the font size is not, I read that I can use important! but I want to know why it is not working as it has been working in version 4 .
const useStyles = makeStyles((theme: Theme) => ({
root: {
flexGrow: 1,
},
icon: {
fontSize: 140,
backgroundColor: 'red',
'&:hover': {
backgroundColor: 'red',
},
},
}));
<Box style={{ display: 'flex', alignItems: 'center' }}>
<EmojiObjectsIcon color='primary' className={classes.icon} onClick={switchTheme} />
</Box>
add px for fontSize like this :
const useStyles = makeStyles((theme: Theme) => ({
root: {
flexGrow: 1,
},
icon: {
fontSize: '140px',
backgroundColor: 'red',
'&:hover': {
backgroundColor: 'red',
},
},
}));
const PublicSidebar = () => {
const classes = useStyles();
return (
<Box style={{ display: 'flex', alignItems: 'center' }}>
<EmojiObjectsIcon color='primary' className={classes.icon} onClick={switchTheme} />
</Box>
)
}

Is there any method to make the MaterialTable overflow scroll-able on x-axis?

I am using MaterialTable from material-table package. I want the the table to have scrollable on x-axis in order to deal with many columns. Below is the code:
<MaterialTable
title="Members Account Logs"
columns={columns}
icons={tableIcons}
data={data}
options={{
headerStyle:
{
backgroundColor: 'black',
color: 'white'
},
rowStyle:{
backgroundColor: 'white',
color: 'black'
},
}}
/>
What props should I pass to make the table scrollable on x-axis
The solution is to wrap the into the div with style as:
<div
style={{
width:'1535px',
overflowX:'auto'
}}
>
<MaterialTable
title="Members Account Logs"
columns={columns}
icons={tableIcons}
data={data}
options={{
headerStyle:
{
backgroundColor: 'black',
color: 'white'
},
rowStyle:{
backgroundColor: 'white',
color: 'black' ,
},
padding: "dense",
tableLayout: "block",
overflowX:"auto"
}}
/>
</div>
The div makes the boundaries limit for the page and hence the MaterialTable will have overflow on x-axis

How to display input values in <Text> instead of alert in react native expo?

How to display form's input value in json format instead of alert?
Like this:
{
'username':'abcd',
'password':'kkkk'
}
this is the code
import React, { Component } from 'react';
import { Alert, Button, Text, TouchableOpacity, TextInput, View, StyleSheet } from 'react-native';
export default class App extends Component {
state = {
email: '',
password: '',
};
onLogin() {
const { email, password } = this.state;
Alert.alert('Credentials', `email: ${email} + password: ${password}`);
}
render() {
return (
<View style={styles.container}>
<Text style={styles.titleText}>Hi, Welcome To</Text>
<Text style={styles.titleText}>Momento</Text>
<TextInput
value={this.state.email}
keyboardType = 'email-address'
onChangeText={(email) => this.setState({ email })}
placeholder='email'
placeholderTextColor = 'white'
style={styles.input}
/>
<TextInput
value={this.state.password}
onChangeText={(password) => this.setState({ password })}
placeholder={'password'}
secureTextEntry={true}
placeholderTextColor = 'white'
style={styles.input}
/>
<TouchableOpacity
style={styles.button}
onPress={this.onLogin.bind(this)}
>
<Text style={styles.buttonText}> Sign Up / Login </Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'salmon',
},
titleText:{
fontFamily: 'Baskerville',
fontSize: 50,
alignItems: 'center',
justifyContent: 'center',
},
button: {
alignItems: 'center',
backgroundColor: 'powderblue',
width: 200,
height: 44,
padding: 10,
borderWidth: 1,
borderColor: 'white',
borderRadius: 25,
marginBottom: 10,
},
buttonText:{
fontFamily: 'Baskerville',
fontSize: 20,
alignItems: 'center',
justifyContent: 'center',
},
input: {
width: 200,
fontFamily: 'Baskerville',
fontSize: 20,
height: 44,
padding: 10,
borderWidth: 1,
borderColor: 'white',
marginVertical: 10,
},
});
Try this might help
state = {
inputData:'',
};
onLogin() {
const { email, password } = this.state;
const data = {};
data.email = email;
data.password = password;
this.setState({inputData: JSON.stringify(data) });
// Alert.alert('Credentials', `email: ${email} + password: ${password}`);
}
<Text>{this.state.inputData}</Text>

React-Native bordered text input?

I am trying to create a login form like below on React Native:
I am having trouble creating a Form/ TextInput with solid border (don't worry about other CSS styling. I just need to get the solid border.)
Imports:
import { View, Text, TextInput } from 'react-native';
import { FormLabel, FormInput } from 'react-native-elements';
import { Container, Header, Content, Form, Item, Input, Label, Button } from 'native-base';
This is the style:
const styles = {
container: {
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center',
display: 'flex',
},
loginSquare: {
backgroundColor: '#FFFFFF',
height: 300,
width: 300,
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'center'
},
loginHeader: {
backgroundColor: '#660008',
width: '100%',
height: 75
},
loginText: {
color: '#FFFFFF'
},
loginForm: {
width: 250,
height: 50
},
loginButton: {
backgroundColor: '#660008'
},
loginForm: {
height: 75,
marginLeft: 25,
marginRight: 25,
borderColor: 'gray'
}
}
and code:
render(){
return (
<View style={styles.container}>
<View style={styles.loginSquare}>
<View style={styles.loginHeader}>
<Text style={styles.loginText}>Login</Text>
</View>
<View style={styles.loginForm}>
<TextInput
style={{height: 75}}
placeholder="Email"
/>
</View>
<View style={styles.loginForm}>
<TextInput
style={{height: 75}}
placeholder="Password"
/>
</View>
<View>
<Button block style={styles.loginButton}>
<Text style={styles.loginText}>Sign In</Text>
</Button>
</View>
</View>
</View>
The code sample above was my attempt using RN's TextInput component + pure CSS. I am also looking at NativeBase and RNElements (RNElements forms API: here, NativeBase forms API: here), but RN Elements does not mention anything about Text Input + Border, and while Native Base mentioned it, I tried, unsuccessfully:
<Form bordered>
<Item>
<Input placeholder="Username" />
</Item>
</Form>
What is one way I can create bordered input like the first screenshot?
If you want a border input then you need to add the borderWidth and borderColor prop to your TextInput style prop. The code for creating these 2 TextInput with border will be as below:-
<View style={{
justifyContent: 'center',
alignItems: "center"
}}>
<TextInput
style={{
borderWidth: 2, // size/width of the border
borderColor: 'lightgrey', // color of the border
paddingLeft: 10,
height: 75
}}
placeholder="Email"
/>
<TextInput
style={{
borderWidth: 2,
borderColor: 'lightgrey',
margin: 10,
height: 75,
paddingLeft: 10
}}
placeholder="Password"
/>
</View>
This will create your TextInput with your desired border :)
<View tyle={{flexDirectoin:'column',alignItems:'center'>
<View
style{{flexdirection:'row',alignItems:'center',
borderWidth:1,borderColor:'#000000'>
<Image/>
<TextInput/>
</View>
<View
style{{flexdirection:'row',alignItems:'center',
borderWidth:1,borderColor:'#000000'>
<Image/>
<TextInput/>
</View>
</View>
Something roughly like this will do