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

React-Native 0.68.2 Modals are not working - iOS

I upgraded react native application to react version 17.0.1 and react-native 0.68.2.
Modals are no longer visible on the iOS application beyond that point. I'm using the react-native-modal: "^13.0.1" library to create those modals.
To confirm the issue, I replaced sample modal code react-native-modal-example on top of my existing code. However, the problem is still present.
There is a bug reported like this
Therefore, I used modal provided by react-native instead of using react-native-modal: "^13.0.1" but the same problem is occurred.
Is there any solution for this?
my code as follows,
import React, {useState} from 'react';
import {Image, View, Text, TouchableOpacity, Alert, Pressable, StyleSheet} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import Modal from 'react-native-modal'
const login = props => {
const [modalVisible, setModalVisible] = useState(false);
return (
<SafeAreaView style={styles1.centeredView}>
<Modal isVisible={true}>
<View style={styles1.centeredView}>
<View style={styles1.modalView}>
<Text style={styles1.modalText}>Hello World!</Text>
<Pressable
style={[styles1.button, styles1.buttonClose]}
onPress={() => setModalVisible(!modalVisible)}>
<Text style={styles1.textStyle}>Hide Modal</Text>
</Pressable>
</View>
</View>
</Modal>
<TouchableOpacity
style={[styles1.button, styles1.buttonOpen]}
onPress={() => setModalVisible(true)}>
<Text style={styles1.textStyle}>Show Modal</Text>
</TouchableOpacity>
</SafeAreaView>
);
};
const styles1 = StyleSheet.create({
centeredView: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: 22
},
modalView: {
margin: 20,
backgroundColor: "white",
borderRadius: 20,
padding: 35,
alignItems: "center",
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5
},
button: {
borderRadius: 20,
padding: 10,
elevation: 2
},
buttonOpen: {
backgroundColor: "#F194FF",
},
buttonClose: {
backgroundColor: "#2196F3",
},
textStyle: {
color: "white",
fontWeight: "bold",
textAlign: "center"
},
modalText: {
marginBottom: 15,
textAlign: "center"
}
});
export default (login);

This one works!
import React, { useState } from "react";
import {
Modal,
View,
Text,
TouchableOpacity,
Alert,
Pressable,
StyleSheet,
SafeAreaView
} from "react-native";
const Example = props => {
const [modalVisible, setModalVisible] = useState(false);
return (
<SafeAreaView style={styles1.centeredView}>
<Modal isVisible={true}>
<View style={styles1.centeredView}>
<View style={styles1.modalView}>
<Text style={styles1.modalText}>Hello World!</Text>
<Pressable
style={[styles1.button, styles1.buttonClose]}
onPress={() => setModalVisible(!modalVisible)}
>
<Text style={styles1.textStyle}>Hide Modal</Text>
</Pressable>
</View>
</View>
</Modal>
<TouchableOpacity
style={[styles1.button, styles1.buttonOpen]}
onPress={() => setModalVisible(true)}
>
<Text style={styles1.textStyle}>Show Modal</Text>
</TouchableOpacity>
</SafeAreaView>
);
};
export default Example;
const styles1 = StyleSheet.create({
centeredView: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: 22
},
modalView: {
margin: 20,
backgroundColor: "white",
borderRadius: 20,
padding: 35,
alignItems: "center",
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5
},
button: {
borderRadius: 20,
padding: 10,
elevation: 2
},
buttonOpen: {
backgroundColor: "#F194FF"
},
buttonClose: {
backgroundColor: "#2196F3"
},
textStyle: {
color: "white",
fontWeight: "bold",
textAlign: "center"
},
modalText: {
marginBottom: 15,
textAlign: "center"
}
});

create a curved bottom navigation (before after implementation)

How can I achieve this in react native?
So far I have this and I want to implement the middle curve. I don't know to either handle it with a transparent view or switch to SVG completely
and this the tabBar component
/* eslint-disable react/prop-types */
import React, { Component } from 'react'
import { TouchableOpacity, Text, StyleSheet, View } from 'react-native'
import { Colors } from 'App/Theme'
export default class TabBar extends Component {
render() {
let {
renderIcon,
getLabelText,
activeTintColor,
inactiveTintColor,
onTabPress,
onTabLongPress,
getAccessibilityLabel,
navigation,
showLabel,
} = this.props
let { routes, index: activeRouteIndex } = navigation.state
return (
<View style={styles.tabBar}>
{routes.map((route, routeIndex) => {
let isRouteActive = routeIndex === activeRouteIndex
let tintColor = isRouteActive ? activeTintColor : inactiveTintColor
return (
<TouchableOpacity
key={routeIndex}
style={styles.tab}
onPress={() => {
onTabPress({ route })
}}
onLongPress={() => {
onTabLongPress({ route })
}}
accessibilityLabel={getAccessibilityLabel({ route })}
>
{renderIcon({ route, focused: isRouteActive, tintColor })}
{showLabel ? <Text>{getLabelText({ route })}</Text> : null}
</TouchableOpacity>
)
})}
</View>
)
}
}
const styles = StyleSheet.create({
tab: {
alignItems: 'center',
flex: 1,
justifyContent: 'center',
},
tabBar: {
alignSelf: 'center',
backgroundColor: Colors.primary,
borderRadius: 50,
bottom: 10,
elevation: 2,
flexDirection: 'row',
height: 65,
position: 'absolute',
width: '95%',
},
infinity: {
width: 80,
height: 100,
},
infinityBefore: {
position: 'absolute',
top: 0,
left: 0,
width: 0,
height: 0,
borderWidth: 20,
borderColor: 'red',
borderStyle: 'solid',
borderTopLeftRadius: 50,
borderTopRightRadius: 50,
borderBottomRightRadius: 50,
borderBottomLeftRadius: 0,
transform: [{ rotate: '-135deg' }],
},
infinityAfter: {
position: 'absolute',
top: 0,
right: 0,
width: 0,
height: 0,
borderWidth: 20,
borderColor: 'red',
borderStyle: 'solid',
borderTopLeftRadius: 50,
borderTopRightRadius: 0,
borderBottomRightRadius: 50,
borderBottomLeftRadius: 50,
transform: [{ rotate: '-135deg' }],
},
})

here is a demo: https://snack.expo.io/#nomi9995/cf371e
you need to use react-native-svg
yarn add react-native-svg
import React, { Component } from "react";
import {
Text,
StyleSheet,
View,
Dimensions,
TouchableHighlight,
} from "react-native";
import Svg, { Circle, Path } from "react-native-svg";
const tabs = [1, 2, 3, 4, 5];
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
pathX: "357",
pathY: "675",
pathA: "689",
pathB: "706",
};
}
render() {
return (
<View style={[styles.container]}>
<View style={[styles.content]}>
<View style={styles.subContent}>
{tabs.map((_tabs, i) => {
return (
<TouchableHighlight
key={i}
underlayColor={"transparent"}
onPress={() => console.log("onPress")}
>
<View>
</View>
</TouchableHighlight>
);
})}
</View>
<Svg
version="1.1"
id="bottom-bar"
x="0px"
y="0px"
width="100%"
height="100"
viewBox="0 0 1092 260"
space="preserve"
>
<Path
fill={"#373A50"}
stroke={"#373A50"}
d={`M30,60h${this.state.pathX}.3c17.2,0,31,14.4,30,31.6c-0.2,2.7-0.3,5.5-0.3,8.2c0,71.2,58.1,129.6,129.4,130c72.1,0.3,130.6-58,130.6-130c0-2.7-0.1-5.4-0.2-8.1C${this.state.pathY}.7,74.5,${this.state.pathA}.5,60,${this.state.pathB}.7,60H1062c16.6,0,30,13.4,30,30v94c0,42-34,76-76,76H76c-42,0-76-34-76-76V90C0,73.4,13.4,60,30,60z`}
/>
<Circle
fill={"#7EE6D2"}
stroke={"#7EE6D2"}
cx="546"
cy="100"
r="100"
/>
</Svg>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
overflow: "hidden",
},
content: {
flexDirection: "column",
zIndex: 0,
width: Dimensions.get("window").width - 30,
marginBottom: "4%",
left: "4%",
right: "4%",
position: "absolute",
bottom: "1%",
},
subContent: {
flexDirection: "row",
marginLeft: 15,
marginRight: 15,
marginBottom: 10,
zIndex: 1,
position: "absolute",
bottom: 5,
}
});
i hope this will help you.

Here is 2 solution according to your requirement.
If you want this type of design without selection then this code will help you :
https://github.com/alex-melnyk/clipped-tabbar
And if you need on each tab selection then here is other easy library for you :
https://github.com/Jm-Zion/rn-wave-bottom-bar

It's not obvious that this can be done with only <View/> components. I would split the TabBar into a flex row container with three subviews, and create an SVG with the filled inverted radius to be used in the center subview. To render the SVG, use react-native-svg. See a rough layout below:
...
import { SvgXml } from 'react-native-svg';
import TabCenterSvg from ‘assets/my-svg.svg’
export default class TabBar extends Component {
render() {
return (
<View style={styles.tabBar}>
<View style={styles.leftContainer}>
{/* Left Buttons */}
</View>
<View style={styles.centerContainer}>
<View style={styles.centerInnerTopContainer}>
{/* Add Button */}
</View>
<View style={styles.centerInnerBottomContainer}>
<SvgXml xml={TabCenterSvg} />
</View>
</View>
<View style={styles.rightContainer}>
{/* Right Icons */}
</View>
</View>
)
}
}
const styles = StyleSheet.create({
tabBar: {
alignSelf: 'center',
borderRadius: 50,
bottom: 10,
elevation: 2,
flexDirection: 'row',
height: 65,
position: 'absolute',
width: '95%',
},
leftContainer: {
flex: 1,
flexDirection: 'row',
borderBottomLeftRadius: 50,
borderTopLeftRadius: 50,
borderTopRightRadius: 50,
backgroundColor: Colors.primary,
},
centerContainer: {
flex: 1,
flexDirection: 'column',
},
centerInnerTopContainer: {
flex: 1,
},
centerInnerBottomContainer: {
flex: 1,
},
rightContainer: {
flex: 1,
flexDirection: 'row',
borderTopLeftRadius: 50,
borderTopRightRadius: 50,
borderBottomRightRadius: 50,
backgroundColor: Colors.primary,
},
})

Use this library's code and customize according to your UI
https://www.npmjs.com/package/curved-bottom-navigation-bar
Note: I'll not recommend this library as there are low weekly downloads.
Rather than using the whole library, you can use its code.

Unable to import files

I have been trying to import a component that contains my custom input component into my profile screen.I have tried import both the ProfTab.js(container of my custom textInput component) and the FlexibleInput.js(custome TextInput.js) into my profileScreen.js separately to make sure there was nothing wrong with the files. I have tried deleting the app and restarting the bundle but nothing seems to be working, but i keep getting thrown this error instead.
Failed to load bundle(http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minigy=false) with error: (Unable to resolve module ../Components/profScreenComp/FlexInput from /Users/apple/Documents/Vscode/React-Native/Fluffy/src/Componensts/profScreenComp/ProfTabs.js: The module ../Components/profScreenComp/FlexInput could not be found from /Users/apple/Documents/Vscode/React-Native/Fluffy/src/Components/profScreenComp/ProfTab.js.
Indeed, none of these files exists)
Below is my profileScreen.js
import React, { Component } from 'react';
import {View, Text, StyleSheet,Dimensions, ImageBackground,Button} from "react-native"
import Auth from "../Components/authComp/auth"
import ProfileTab from '../Components/profScreenComp/ProfTab'
// import FlexibleInput from '../Components/profScreenComp/flexInput'
import {connect} from 'react-redux'
const Width= Dimensions.get('window').width
class ProfileScreen extends Component {
static navigatorStyle = {
navBarHidden: true,
drawUnderNavBar: true,
// navBarTranslucent: true
};
handleNavigation= ()=>{
this.props.navigator.push({
screen: "fluffy.ProfileInfoScreen",
animated: true,
animationType: "ease-in"
})
}
render() {
// let display= (<Auth/>)
if(!this.props.auth){
return(
<Auth/>
)
}else{
return (
<View style={{flex: 1}}>
<ImageBackground style={styles.background}>
<View style= {styles.header}>
<Text style={{color: "white", fontSize: 20,}}>PROFILE</Text>
</View>
<View style={styles.pointsBox}>
</View>
</ImageBackground>
{/* <View style={styles.circle}><Text>M</Text></View> */}
<View style= {styles.activity}>
<View style={styles.tabsContainer}>
<View style={styles.tabs}>
<Text>Profile</Text>
<Text>My Orders</Text>
<Text>Support</Text>
</View>
</View>
<View style={styles.body}>
<ProfileTab/>
{/* <FlexibleInput/> */}
</View>
</View>
</View>
)
}
}
}
const styles= StyleSheet.create({
header:{
width: Width,
height:50,
alignItems: 'center',
justifyContent: "center"
,backgroundColor: "#20265c",
justifyContent: "flex-end",
paddingBottom: 10,
},
background:{
backgroundColor: "maroon",
height: '50%',
flex: 4,
justifyContent:'space-between'
},
pointsBox:{
height: 40,
width: '60%',
backgroundColor: "gray",
borderRadius: 5,
alignSelf: 'center',
},
// circle:{
// alignItems: 'center',
// justifyContent:"center",
// height: 100,
// width: 100,
// backgroundColor: "white",
// position: "absolute",
// borderRadius: 50,
// top: 240,
// left: 140,
// zIndex:2
// },
activity:{
backgroundColor: "gray",
flex: 6,
// justifyContent: "center",
// alignItems: 'center',
},
tabs:{
// marginTop: 10,
// padding: 10,
backgroundColor:'white',
borderRadius: 50,
height: '90%',
width: '90%',
flexDirection: 'row',
justifyContent:'space-around',
alignItems: 'center',
},
tabsContainer:{
flex:1,
justifyContent:'center',
alignItems:'center',
backgroundColor: 'orange'
},
body:{
flex: 9,
backgroundColor: 'beige'
}
})
const mapStateToProps = state => {
return{
auth: state.auth.login
}
}
export default connect(mapStateToProps)(ProfileScreen)
This is the component that contains my custom TextInput component
import React, { Component } from 'react';
import { View, StyleSheet, ScrollView} from 'react-native';
import FlexibleInput from '../Components/profScreenComp/FlexInput'
class profTab extends Component {
render() {
return (
<ScrollView contentContainerStyle={styles.container}>
<View style={styles.content}>
<FlexibleInput styles={styles.input} />
</View>
</ScrollView>
);
}
}
const styles= StyleSheet.create({
container:{
flex:1,
margin: 10,
padding: 10,
justifyContent:'center',
alignItems: 'center',
},
content:{
height: '100%',
width: '100%'
},
input:{
borderColor: 'red',
}
})
export default profTab
And finally my custom TextInput component
import React from 'react'
import {TextInput, StyleSheet} from 'react-native'
const flexibleInput = (props) => (
<TextInput
{...props}
style={[styles.input,props.styles]}
/>
)
const styles= StyleSheet.create({
input: {
width: "100%",
borderWidth: 1,
borderColor: "#eee",
padding: 5,
marginTop: 8,
marginBottom: 8
},
})
export default flexibleInput

React Native, <Image> can't contain children

I'm trying to put like a logo/picture in my app. I am already using BackgroundImage so I want to put Image on top of the background. Check my code below. Please help me figure it out.
import React from 'react';
import { StyleSheet, Text, View, ImageBackground, Image } from 'react-native';
export default class App extends React.Component {
render() {
return (
<ImageBackground source={require('./app/img/baky.jpeg')} style={styles.container}>
<View style={styles.inner}>
<Image source={require('./app/img/logo.png')} style={styles.logo}> </Image>
<Text style={styles.txt}> Hello!!!! </Text>
</View>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
inner: {
padding: '10%',
justifyContent: 'center',
flexDirection: 'row',
width: '100%',
height: '100%',
backgroundColor: 'rgba(255, 255, 255, .7)'
},
logo: {
width: 50,
height: 50
},
txt: {
color: 'black',
}
});