import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableHighlight } from 'react-native';
class First extends Component {
render () {
return (
<View style = {styles.container}>
<Text>
Hello world!
</Text>
</View>
);
}
}
const styles = StyleSheet.create ({
container: {
backgroundColor: 'yellow',
flex: 1
}
});
module.exports = First;
This code fills the screen with yellow in projects started with react-native init but shows nothing in projects started with create-react-native-app. Is this normal?
Edit: This was mistakenly called from a styled View in the main App.js.
Stupid mistake; I was calling this component from a styled View of the main App.js. Thanks for taking the time to help out, guys.
it will help you
import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableHighlight } from 'react-
native';
class First extends Component {
render () {
return (
<View>
<Text style = {styles.container}>
Hello world!
</Text>
</View>
);
}
}
const styles = StyleSheet.create ({
container: {
backgroundColor: 'yellow',
flex: 1
}
});
module.exports = First;
I used your code, and create app using create-react-native-appand show yellow background color with text hello world! on top left
here the result that i had the-result-using-create-react-native-app
maybe you should create another test app using create-react-native-add command and see the result
Related
I am using Next.js with Material-UI as the framework.
I have Layout component that wraps the contents with Material-UI <Container>.
I would like to override the style of Layout that limits the width of background, so that the background would extend to the full screen.
components/Layout.js
import { Container } from '#material-ui/core';
export default function Layout({ children }) {
return <Container>{children}</Container>;
}
pages/_app.js
import Layout from '../components/Layout';
...
<Layout>
<Component {...pageProps} />
</Layout>
...
pages/index.js
export default function App() {
return (
<div style={{ backgroundColor: "yellow" }}>
Home Page
</div>
)
}
Using Layout component comes in handy in most cases but sometimes I do want to override the certain styles of Layout from the child component.
In this case, how do I override the style of Layout component that puts the limit on maxWidth?
I tried to add {width: '100vw'} inside the style of pages/index.js, but did not work.
Any help would be appreciated.
Link to the SandBox
Using React Context is how I've solved this issue.
context/ContainerContext.js
import React from 'react';
const ContainerContext = React.createContext();
export default ContainerContext;
components/Layout.js
import React, { useState } from 'react';
import { Container } from '#material-ui/core';
import ContainerContext from '../context/ContainerContext';
export default function Layout({ children }) {
const [hasContainer, setHasContainer] = useState(true);
const Wrapper = hasContainer ? Container : React.Fragment;
return (
<ContainerContext.Provider value={{ hasContainer, setHasContainer }}>
<Wrapper>{children}</Wrapper>
</ContainerContext.Provider>
);
}
pages/index.js
import { useContext, useLayoutEffect } from 'react';
import ContainerContext from '../context/ContainerContext';
export default function App() {
const { setHasContainer } = useContext(ContainerContext);
// Where the magic happens!
useLayoutEffect(() => {
setHasContainer(false);
}, []);
return (
<div style={{ backgroundColor: "yellow" }}>
Home Page
</div>
);
}
With React Native, I'm looking to use StyleSheet to define a style and then use that style in numerous components, but I would like to change or override individual props for a few components. For example, a stack of 10 views with 5 different colors but all other props the same. Is this possible? What does the syntax look like?
I can't imagine I have to define 5 different styles or use in-line styling. Thanks very much for your help.
You can export some globally used styles from a single module, and import them wherever you need. Then to combine styles you can use the array syntax like [ styleA, styleB ].
So in a simple example you could do something like:
// ./styles.js
import { StyleSheet } from 'react-native';
export default StyleSheet.create({
containerDefault: {
height: 100,
width: 300,
backgroundColor: 'black'
},
backgroundBlue: {
backgroundColor: 'blue'
},
backgroundGreen: {
backgroundColor: 'green'
}
});
And then...
// ./SomeComponent.js
import React from 'react';
import { View, Text } from 'react-native';
import styles from './styles';
const ComponentBlack = () => {
return (
<View style={styles.containerDefault}>
<Text>I should be black</Text>
</View>
);
};
const ComponentBlue = () => {
return (
<View style={[styles.containerDefault, styles.backgroundBlue]}>
<Text>I should be blue</Text>
</View>
);
};
const ComponentGreen = () => {
return (
<View style={[styles.containerDefault, styles.backgroundGreen]}>
<Text>I should be green</Text>
</View>
);
};
export default () => {
return (
<View>
<ComponentBlack />
<ComponentBlue />
<ComponentGreen />
</View>
);
};
I'm writing some simple reusable component for our React(with MaterialUI) application.
The problem is, that i want to allow different styles of this same reusable component, to be customized via props, by the consuming component.
This is some of the code:
import { withStyles } from '#material-ui/core';
const styles = theme => ({
image: {
maxHeight: '200px'
}
});
render() {
const classes = this.props.classes
return (
<div>
...
<img className={classes.image} src={this.state.filePreviewSrc} alt="" />
...
</div>
);
}
Let's say, i want to allow the programmer to customize the appearance of classes.image. Can the hard-coded image class be overwritten somehow?
Is using withStyles api is even the correct approach, for creating components whose appearance can be customized by the consuming component/programmer?
There are three main approaches available for how to support customization of styles:
Leverage props within your styles
Leverage props to determine whether or not certain classes should be applied
Do customization via withStyles
For option 3, the styles of the wrapping component will be merged with the original, but the CSS classes of the wrapping component will occur later in the <head> and will win over the original.
Below is an example showing all three approaches:
ReusableComponent.js
import React from "react";
import { withStyles } from "#material-ui/core/styles";
const styles = {
root: props => ({
backgroundColor: props.rootBackgroundColor
? props.rootBackgroundColor
: "green"
}),
inner: props => ({
backgroundColor: props.innerBackgroundColor
? props.innerBackgroundColor
: "red"
})
};
const ReusableComponent = ({ classes, children, suppressInnerDiv = false }) => {
return (
<div className={classes.root}>
Outer div
{suppressInnerDiv && <div>{children}</div>}
{!suppressInnerDiv && (
<div className={classes.inner}>
Inner div
<div>{children}</div>
</div>
)}
</div>
);
};
export default withStyles(styles)(ReusableComponent);
index.js
import React from "react";
import ReactDOM from "react-dom";
import { withStyles } from "#material-ui/core/styles";
import ReusableComponent from "./ReusableComponent";
const styles1 = theme => ({
root: {
backgroundColor: "lightblue",
margin: theme.spacing(2)
},
inner: {
minHeight: 100,
backgroundColor: "yellow"
}
});
const Customization1 = withStyles(styles1)(ReusableComponent);
const styles2 = {
inner: {
backgroundColor: "purple",
color: "white"
}
};
const Customization2 = withStyles(styles2)(ReusableComponent);
function App() {
return (
<div className="App">
<ReusableComponent>Not customized</ReusableComponent>
<Customization1>Customization 1 via withStyles</Customization1>
<Customization2>Customization 2 via withStyles</Customization2>
<ReusableComponent rootBackgroundColor="lightgrey" suppressInnerDiv>
Customization via props
</ReusableComponent>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Screen Shot of Iphone Iv'e been trying to make my view background color go till the top on the iPhone x but still can figure out how to do this I still have a white section on the top.
import React from 'react'
import { View, Text, ActivityIndicator, StyleSheet } from 'react-
native'
import firebase from 'firebase';
export default class Loading extends React.Component {
componentDidMount() {
// firebase.auth().onAuthStateChanged(user => {
// this.props.navigation.navigate(user ? 'Main' : 'Login')
// }) // for now to solve problem
}
render() {
return (
<View style={styles.container}>
<Text>Loading</Text>
<ActivityIndicator size="large" />
</View>
)
}
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#2C3E50',
justifyContent: 'center',
alignItems: 'center',
}
});
I would very much like the background color to go to the top as well
I haven't run your code but I'm assuming that the issue is the switchNavigator is showing a header. If this is the case then you want to change the color of the navigator within the screen that you are on.
So within your Loading class:
export default class Loading extends React.Component {
// Add this:
static navigationOptions = {
headerStyle: {
backgroundColor: '#2C3E50',
},
};
componentDidMount() {}
render() {
return (
<View style={styles.container}>
<Text>Loading</Text>
<ActivityIndicator size="large" />
</View>
)
}
};
Reference: https://reactnavigation.org/docs/en/headers.html#adjusting-header-styles
That may be header of stack navigator(very less probability).. or may be with "safeViewiOS"... This may be also a issue with react navigation. Using flex:1 usually takes the screen acc to flex property .. This is surely a inherited property. not a problem with flex or CSS
Try adding :
forceInset={{ bottom: 'never', top: "never" }}>
I am new to react native.I learned the benefits of components, embedding external styles.Now I am trying to use global styles.I'd like to use the same styles of text, button throughout my app.
Better not to repeat the styles in every component, I'd like to create separate text.js, button.js under styles package to customizing view styles.
Here is my project structure.I want to import text.js into my index.js.
index.js
import { AppRegistry } from 'react-native';
import React, {Component} from 'react';
import {
Text
} from 'react-native';
import text from './App/styles';
export default class FirstApp extends Component{
render(){
return (
<Text styles={text.p}>Customising React</Text>
);
}
}
AppRegistry.registerComponent('FirstApp', () => FirstApp);
text.js
import{
StyleSheet
} from 'react-native';
export default const text = StyleSheet.create({
p: {
color: 'blue',
fontSize: 14
}
});
Is there any way to import my text.js style into text view in index.js?
Export default const is invalid.
If you want text to be a default export you will need to define it and export in separate statements.
const text = StyleSheet.create({...});
export default test;
Also it looks like your import path does not match your actual application structure.
import text from './App/styles';
change to
import text from './styles/text.js';
create a new file call 'style.js'
export const customStyle = StyleSheet.create({
blueblue:{
color: blue
}
})
and in your component file
import {customStyle} from './style'
...
<Text style={customStyle.blueblue}>Hi</Text>
create this on style.js
const style = StyleSheet.create({
p: {
color: 'blue',
fontSize: 14
}
})
export default style;
and import anywhere you want
like this
import Style from './(path to file)/style'
use style like this
<View style={[Style.p, {
padding: 20,
backgroundColor: 'grey',
justifyContent: 'center',
alignContent: 'center'
}]}>
if single use
<View style={Style.p}>
so this may help