I am unable to see my design from the imported file, all I can see is the background color of the settings page
I have tried modifying the containers and adding other files within. As you will see there are two sets of code the first being Menu button where the expected design should be a white Line and the Second the Settings page
import React from 'react';
import {StyleSheet, View} from "react-native" ;
export default class MenuButton extends React.Component {
render() {
return(
<View lines={line.menuIcon}>
</View>
)
}
}
const line = StyleSheet.create({
menuIcon: {
flex: 1,
backgroundColor : 'rgba(215, 215, 215, 1)',
top : 4,
height : 1,
width : 6,
position : 'absolute',
margin : 0,
left : 0,
borderRadius : 0,
borderStyle : 'solid',
borderWidth : 1,
borderColor : 'rgba(255, 255, 255, 1)'
}})
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MenuButton from './Menu/MenuButton'
export default class SettingScreen extends React.Component{
render(){
return(
<View style={styles.container}>
<MenuButton/>
<Text style={styles.text}>Settings</Text>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'rgba(0,0,0,0.0)',
alignItems: 'center',
justifyContent: 'center',
},
text:{
fontSize: 30,
}
});
@Camille Basbous I think you did mistake in your MenuButton file. Just changes your lines={line.menuIcon}
to style={line.menuIcon}
import React from 'react';
import {StyleSheet, View} from "react-native" ;
export default class MenuButton extends React.Component {
render() {
return(
<View style={line.menuIcon}>//<-----here you have used lines instead of styles
</View>
)
}
}
Second one is you given backgroundColor: 'rgba(0,0,0,0.0)'
in SettingScreen means black color with alpha 0 it's unfortunately white. and Your border color of MenuButton file is also borderColor : 'rgba(255, 255, 255, 1)'
= White. So you won't be able to see that in your screen white change color.
I have tried something with your code just changed color and width of your border. https://snack.expo.io/rJHD74e9V