We Keep Coding

Progress bar UI custom design in React Native

I'm quite new to react native and javascript and I have to make this type of progress bar with the four categories.
Can anyone help or suggest to me how can I achieve this UI in react native for android and iOS on both platforms?
The expected output screenshot is attached below:
However, I don't need the user interaction or progress animation, I just have to show the fix progress in percentage.

Here's an approximation of your component built in React Native, you'll need to add react-native-linear-gradient to your dependencies beforehand
I have also created a demo on Expo (you should test it on the target device) that uses expo's version of the linear gradient library. https://snack.expo.dev/#sabihi/milestone-progressbar
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
export default function App() {
return (
<View style={styles.container}>
<View style={styles.progressLabels}>
<Text style={styles.progressLabel}>Beginner</Text>
<View style={styles.progressLabel}></View>
<Text style={styles.progressLabel}>Amateur</Text>
<View style={styles.progressLabel}></View>
<Text style={styles.progressLabel}>Elite</Text>
<View style={styles.progressLabel}></View>
<Text style={styles.progressLabel}>Master</Text>
</View>
<View style={styles.progressContainer}>
<LinearGradient colors={["rgb(7, 14, 60)", "rgb(86, 90, 106)"]} style={styles.progress}/>
<View style={styles.milestonesContainer}>
<View style={styles.milestone}/><View style={styles.milestone}/><View style={styles.milestone}/>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
// paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
progressLabels: {
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
width: "100%",
marginBottom: 10,
},
progressLabel: {
fontSize: 12,
fontWeight: 'bold',
fontFamily: "sans-serif",
width: "14.3%",
textAlign: "center"
},
progressContainer: {
position: "relative",
height: 100
},
progress: {
marginLeft: "5%",
marginTop: 5,
width: "90%",
height: 30,
// backgroundColor: "rgb(7, 14, 60)",
borderRadius: 15
},
milestonesContainer: {
marginLeft: "5%",
position: "absolute",
width: "100%",
display: "flex",
flexDirection: "row"
},
milestone: {
height: 40,
width: "30%",
// backgroundColor: "white",
borderColor: "rgb(7, 14, 60)",
borderLeftWidth: 1,
borderRightWidth: 1,
}
});

How do I listen for a click in a layer below (outside) a modal?

Tl;dr
How do I listen for a click in a layer below?
Youtube Video of problem in HD
Hello everyone,
I started yesterday with the dev.to app and now I'm facing an issue that is probably React Native specific.
If you click on your avatar in the top right corner of the dev.to app, a menu will open. Currently I have decided to use the modal brought by React Native.
import { Modal } from 'react-native';
I include it in the code as follows:
// TopBar.js
<Modal
transparent={true}
visible={modalVisible}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
setModalVisible(!modalVisible);
}}>
<UserModal toggleFunction={setModalVisible} />
</Modal>
and pass the current state via the toggleFuntion prop
const [modalVisible, setModalVisible] = useState(false);
The content of the modal is structured as follows
<View style={styles.centeredView}>
<View style={styles.modalView}>
<Text style={styles.userNameText}>Sebastian Richter</Text>
<Text style={styles.userNicknameText}>#gismo1337</Text>
<View style={styles.divider} />
<Text style={styles.modalText}>Dashboard</Text>
<Text style={styles.modalText}>Create Post</Text>
<Text style={styles.modalText}>Reading list</Text>
<Text style={styles.modalText}>Settings</Text>
<View style={styles.divider} />
<Text style={styles.modalText}>Sign Out</Text>
{/* FIXME: For Development only */}
<Pressable
style={[styles.button, styles.buttonClose]}
onPress={() => setModalVisible(false)}>
<Text style={styles.textStyle}>close - for develop only</Text>
</Pressable>
</View>
</View>
const styles = StyleSheet.create({
centeredView: {
alignItems: 'center',
marginTop: 55,
},
modalView: {
width: '95%',
backgroundColor: '#161616',
borderRadius: 5,
borderWidth: 1,
borderColor: '#363636',
padding: 5,
alignItems: 'flex-start',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
},
modalText: {
color: 'white',
marginBottom: 15,
textAlign: 'center',
paddingLeft: 15,
},
userNicknameText: {
color: '#9C9C9C',
marginBottom: 15,
textAlign: 'center',
paddingLeft: 15,
},
userNameText: {
color: 'lightgray',
textAlign: 'center',
paddingLeft: 15,
},
divider: {
borderBottomColor: '#363636',
borderBottomWidth: 1,
width: '100%',
marginBottom: 20,
}
});
Unfortunately, when the modal is open, I now have the problem that clicking on the avatar again is not noticed. This should cause the modal to close. However, my guess is that the "layer" of the ModalView is now over it and the click doesn't arrive.
Q: Does anyone have an idea how I can sort of notice a click in a layer below?
Q: What advantages does the React Native modal bring that a view I have created myself does not have?
Repo:
https://github.com/Gismo1337/dev-to-clone/blob/main/components/TopBar.js
https://github.com/Gismo1337/dev-to-clone/blob/main/components/UserModal.js

Input text label on border in react native

I want to create an input box like this:
But I designed it like this, and I don't know how to add the label on the input border
My Code is:
<InputBox label="Email" icon={true} keyboardType="email-address" defaultValue={emailId} onChangeText={text => setEmailId(text)} />
Input Component:
import React from 'react';
import {View, StyleSheet, TextInput, Text} from 'react-native';
import {COLORS} from '../constants/colors';
import {FONT_FAMILY} from '../constants/font-family';
export default function InputBox(props) {
return (
<View style={styles.container}>
<View style={{flex: 1}}>
<Text style={styles.label}>{props.label}</Text>
<TextInput
placeholder={props.placeholder}
placeholderTextColor="#9F9F9F"
style={styles.input}
keyboardType={props.keyboardType}
secureTextEntry={false}
defaultValue={props.defaultValue}
onChangeText={props.onChangeText}
editable={props.editable}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 20,
paddingTop: 7.5,
paddingHorizontal: 12.5,
paddingBottom: 2.5,
borderRadius: 5,
borderWidth: 0.75,
borderColor: COLORS.WHITE,
},
input: {
fontFamily: FONT_FAMILY.primaryMedium,
fontSize: 14,
height: 37,
color: COLORS.WHITE,
},
label: {
fontFamily: FONT_FAMILY.primary,
marginLeft: 5,
color: COLORS.WHITE,
fontSize: 12,
// marginTop: -30,
},
});
By using react-native-paper, when I add transparent background color it looks like this:

I was able to get this accomplished purely in React Native without any dependencies. The trick was to put the Text in a View with a background color the same as the screen's and position the Text absolutely. My example code hardcodes a lot of values, but if you want it to be responsive you'll need to come up with your own way of figuring those values out. The code:
import { View, Text, TextInput, StyleSheet } from "react-native";
const Input = () => {
return (
<View>
<View style={styles.labelContainer}>
<Text>Email Address</Text>
</View>
<View style={styles.inputContainer}>
<TextInput placeholder="Enter email address" />
</View>
</View>
);
}
const styles = StyleSheet.create({
labelContainer: {
backgroundColor: "white", // Same color as background
alignSelf: "flex-start", // Have View be same width as Text inside
paddingHorizontal: 3, // Amount of spacing between border and first/last letter
marginStart: 10, // How far right do you want the label to start
zIndex: 1, // Label must overlap border
elevation: 1, // Needed for android
shadowColor: "white", // Same as background color because elevation: 1 creates a shadow that we don't want
position: "absolute", // Needed to be able to precisely overlap label with border
top: -12, // Vertical position of label. Eyeball it to see where label intersects border.
},
inputContainer: {
borderWidth: 1, // Create border
borderRadius: 8, // Not needed. Just make it look nicer.
padding: 8, // Also used to make it look nicer
zIndex: 0, // Ensure border has z-index of 0
},
});
export default Input;
This is what it looks like on my device (Samsung Galaxy S10+):

If you have to use a material ui styled components you may wanna use reactnativepaper

hi there you cna use this code to achive
import React from 'react';
import {View, StyleSheet, Text} from 'react-native';
import { TextInput } from 'react-native-paper';
export default function InputBox(props) {
return (
<View style={styles.container}>
<TextInput
mode="outlined"
label="Email"
style={{width:'90%'}}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
justifyContent:'center',alignItems:'center',
flex:1
// borderColor: COLORS.WHITE,
},
input: {
// fontFamily: FONT_FAMILY.primaryMedium,
fontSize: 14,
height: 37,
// color: COLORS.WHITE,
},
label: {
// fontFamily: FONT_FAMILY.primary,
marginLeft: 5,
// color: COLORS.WHITE,
fontSize: 12,
// marginTop: -30,
},
});
you can test it on Snack
Also you can read more about props here react-native-paper

flex:1 not filling whole screen

I'm trying to change the background color of my app, but the color doesn't fill the whole screen. When I set flex to 0, the background color only spans the needed amount, but when I set it to 1, instead of expanding the whole screen, it shrinks. What did I do wrong?
Here's the code, changing the root view flex:
render() {
return (
<Text>{welcome}</Text>
<TextInput
underlineColorAndroid="rgba(0,0,0,0)"
placeholder={email}
autoCapitalize="none"
style={styles.textInput}
onChangeText={email1 => this.setState({ email1 })}
/>
<TextInput
underlineColorAndroid="rgba(0,0,0,0)"
secureTextEntry
placeholder={password}
autoCapitalize="none"
style={styles.textInput}
onChangeText={password1 => this.setState({ password1 })}
value={this.state.password1}
/>
{this.state.errorMessage && (
<Text style={styles.error}>{this.state.errorMessage}</Text>
)}
<TouchableOpacity
onPress={this.handleSignUp}
style={styles.buttonContainer}
>
<Text style={styles.buttonText}>{signup}</Text>
</TouchableOpacity>
<Text
style={styles.text}
onPress={() => this.props.navigation.navigate("LoginScreen")}
>
{already_have_an_account}
</Text>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
container: {
justifyContent: "center",
padding: 20,
backgroundColor: "red",
flex: 0
},
textInput: {
height: 40,
marginTop: 8,
paddingHorizontal: 8,
backgroundColor: "#e2e2e2"
},
buttonContainer: {
backgroundColor: "#3bd774",
padding: 15,
marginTop: 10
},
buttonText: {
textAlign: "center",
color: "white",
fontWeight: "bold"
},
logo: {
width: 200,
height: 200
},
logoContainer: {
alignItems: "center",
justifyContent: "center"
},
text: {
marginTop: 16,
color: "#bcbcbc",
textAlign: "center"
},
error: {
marginTop: 8,
color: "red"
}
});

You need to make sure you have flex:1 all the way down the chain of views. This is because flex: 1 will make the view fill its parent
I can see that what you have copy/pasted isn't all of the code, since there is a </KeyboardAvoidingView> but no opening tag.
So, at the very least you need a <KeyboardAvoidingView style={{flex: 1}}>, but if there is something wrapping that, you should add flex:1 to that control as well.

Put whole layout in a View wrapper and give this style to this view
container: {
justifyContent: "center",
padding: 20,
alignItems:'center',
backgroundColor: "red",
flex: 1
}
Running example: https://snack.expo.io/Hy-Gv-lGm

How to share space with equal-size components in React-native

I have started recently with Javascript and React-native to test if it could be used in the future in my current company, but I'm facing some UI problems.
I'm making a test app with some, kind of almost useless functions to learn a bit of Javascript and how to link JS with native Android modules, but now I'm stuck with the interface. I used to make interfaces with RelativeLayout (ConstraintLayout now), and that's why I'm a bit frustrated with this HTML-like and CSS (which I don't specially know in depth, to be honest).
Given this UI . . .
. . . I actually want those buttons to share all the blank space on the screen and have the same heigth, but I don't want to set any width or heigth property, since I believe that each phone, with its own screen size and resolution, should handle the size of the components.
And serching around here and there, I discovered a property called flex that supposedly works like Android's LinearLayout weigth, but when I use it on any button, they just disappear:
So, how should/could I solve this?
Here are the "HTML" and styles used:
render() {
return (
<View style={styles.container}>
<View style={styles.containerText}>
<ScrollView
style={styles.scrollTextStyle}
contentContainerStyle={{ flexGrow: 1 }}
>
<Text style={styles.textStyle}>{this.state.textField}</Text>
</ScrollView>
<TextInput
multiline={true}
style={styles.inputStyle}
onChangeText={inputField =>
this.setState({
inputField
})}
value={this.state.inputField}
/>
</View>
<View style={styles.containerButton}>
<Button
style={[styles.buttons, styles.firstButton]}
onPress={() => this.pressedButton(1)}
>
Copy input to text
</Button>
<Button
style={[styles.buttons, styles.secondButton]}
onPress={() => this.pressedButton(2)}
>
Android/iOS Toast
</Button>
<Button
style={[styles.buttons, styles.thirdButton]}
onPress={() => this.pressedButton(3)}
>
Android module (Method)
</Button>
<Button
style={[styles.buttons, styles.fourthButton]}
onPress={() => this.pressedButton(4)}
>
Android module (AsyncTask)
</Button>
</View>
</View>
);
}
const styles = StyleSheet.create({
//Root View
container: {
flex: 1,
flexDirection: "column",
backgroundColor: "#F5FCFF"
},
//Texts View
containerText: {
flex: 2,
justifyContent: "center",
backgroundColor: "#EFEFFF"
},
//Buttons View
containerButton: {
flex: 4,
flexDirection: "column",
backgroundColor: "#FFFFFF",
justifyContent: "space-between"
},
//Components on first View
scrollTextStyle: {
borderWidth: 1,
marginTop: 10,
marginBottom: 5,
marginHorizontal: 10,
flex: 1
},
textStyle: {
backgroundColor: "#CEF",
textAlign: "center",
textAlignVertical: "center",
flex: 1
},
inputStyle: {
borderWidth: 1,
marginTop: 5,
marginBottom: 10,
marginHorizontal: 10,
backgroundColor: "#CEF",
textAlign: "center",
textAlignVertical: "center",
flex: 1
},
//Components on second view
//Common style for all buttons and a different one for each
buttons: {
borderRadius: 5,
textAlign: "center",
textAlignVertical: "center",
fontSize: 20
},
firstButton: {
color: "#FFFFFF",
backgroundColor: "#D1E233"
},
secondButton: {
color: "#FFFFFF",
backgroundColor: "#239923"
},
thirdButton: {
color: "#FFFFFF",
backgroundColor: "#958475"
},
fourthButton: {
color: "#FFFFFF",
backgroundColor: "#651278"
}
});
By the way, I would appreciate any tutorial-like web about user interfaces on React-native, since I only found kind of useless things explaining properties, but no quality full examples.

You can use Dimension
import {Dimensions} from 'react-native';
Dimensions.get('window').height
or use react-native-easy-grid
<Grid>
<Row></Row>
<Row></Row>
</Grid>
It will create 2 equal height row

I would recommend wrapping all of the buttons in a div, and then making the div's height equal to the screen height - the height of your input fields.
Example: var {height, width} = Dimensions.get('window');
Source
This will then give the buttons a container to live in. After that you can use % for the height of the buttons. So if you have 4 buttons you can make the height of each of them 25% which would make them fit any screen.