React Native Calculator With Switchable dark mode (with source code)

#ReactNative #Calculator #ReactnativeCalculator #nativeCalculator
In this video, we'll make a fully functioning calculator using React Native
and we are also going to implement the dark mode functionality

source Code :
https://github.com/SyedMohsinAliZaidi/ReactNativeSimpleCalculator

Like and subscirbe and share

follow me on instagram
https://instagram.com/codingwithzaidi?igshid=1jdu9k0ayywu1



Css File and package name


const styles = StyleSheet.create({
results: {
backgroundColor: darkMode ? '#282f3b' : '#f5f5f5',
maxWidth: '100%',
minHeight: '35%',
alignItems: 'flex-end',
justifyContent: 'flex-end',
},
resultText: {
maxHeight: 45,
color: '#FF6666',
margin: 15,
fontSize: 35,
},
historyText: {
color: darkMode ? '#B5B7BB' : '#7c7c7c',
fontSize: 20,
marginRight: 10,
alignSelf: 'flex-end',
},
themeButton: {
alignSelf: 'flex-start',
bottom: '5%',
margin: 15,
backgroundColor: darkMode ? '#7b8084' : '#e5e5e5',
alignItems: 'center',
justifyContent: 'center',
width: 50,
height: 50,
borderRadius: 25,
},
buttons: {
width: '100%',
height: '35%',
flexDirection: 'row',
flexWrap: 'wrap',
},
button: {
borderColor: darkMode ? '#3f4d5b' : '#e5e5e5',
alignItems: 'center',
justifyContent: 'center',
minWidth: '24%',
minHeight: '54%',
flex: 2,
},
textButton: {
color: darkMode ? '#b5b7bb' : '#7c7c7c',
fontSize: 28,
}
})



npm install react-native-vector-icons --save
react-native link
react-native link react-native-vector-icons