Progress bar UI custom design in React Native-CodePudding

The

However, I don't need the user interaction or progress animation, I just have to show the fix progress in percentage.

CodePudding user response：

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, } });