i want to render another component in the main component so user won't face a white screen for a second!
i'm using TabNavigator from react-navigation and when i want to switch between tabs, i face a white screen for a second (seems it need a second to render).
i was thinking of rendering the second tab in the first so i can have a better user experience!
P.s. : my components are in separate files!
Main:
export default class AdCalc extends React.Component {
render() {
return (
<View>
<Text>
TEST
</Text>
</View>
);
}
}
and my child:
export default class Child extends React.Component {
render() {
return (
<View>
<Text>
This is child!
</Text>
</View>
);
}
}
thanks in advance!
You can use react-navigation TabNavigatorConfig's lazy prop. Pass lazy={false} so that your views may load at initial start. Then you will not see such a screen.
Related
On react native I have seen 2 ways to do the export/render, what are the name of them, what other export ways are there?
one way:
export default function App() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
second way:
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>MaKo Open up App.js to start working on your app!</Text>
</View>
);
}
}
First one is a functional component and the second one is a class component.
Most code use these two ways to export or render.
There have some description on document.
I would like to add margins/padding at the root of my app so that I do not have to include padding screen-by-screen.
My current entry point looks like this
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: false
};
//blah blah blah
render() {
return <AppNavigator />;
}
}
The entry point is currently handling the navigation to each screen throughout the app. Is there a way to drop styles into the root so that the parent view of every screen includes padding?
I'm currently styling screens individually, which I would rather simplify to avoid repetition, for example with a styles={styles.container} in the parent View on each screen.
My app is only about 6 screens, so the solution for global padding does not have to be the leanest solution possible, but something at the top level would be nice.
Thanks!
I assume that you would like to add padding to the content only. If you apply to navigator, your header and tabbar could be padded too.
You could define a Content component like this
function Content(props) {
return (
<View {...props} style={[{ padding: 10 }, props.style]}>
{props.children}
</View>
)
}
function YourScreen() {
return (
<Content>
<Text>This is content</Text>
</Content>
)
}
I have a react native web project. At one point, I would like my View instead of generating a <div> to generate a <label> element.
Is there a way to control this? I am hoping for some sort of htmlTag attribute that gets ignored if this is not compiling for a browser environment.
There was a component prop but it's removed in favor of accessibilityRole (Remove component prop).
You can use accessibilityRole to specify the label tag and even create a custom element using it:
function Label({ text }) {
return <View accessibilityRole="label">{text}</View>
}
and then use it like this:
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View>
<Label text="Test input:"/>
<TextInput name="test-input"/>
</View>
</View>
);
}
}
Check this working Expo snack: https://snack.expo.io/#clytras/change-rn-web-div-tag
How about making your own wrapper of View? It could check what environment it is running in, and then if it's in a browser then you can return the label element instead.
You could also use the accessibilityLabel prop on the TextInput, which will add an aria-label prop to the React Native code when it compiles to html for web.
In terms of accessibility, this accomplishes the same effect as a label attribute. See the React Native web docs on accessibility: https://necolas.github.io/react-native-web/docs/accessibility/
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View>
<TextInput accessibilityLabel="test-input" name="test-input"/>
</View>
</View>
);
}
}
Im new in react native,
before in my code using const Main = () => { ..}
but when i change to export default class Main extends React.Component { ..} , problems arise like style in View not working but the error ',' expected in style
Screnshoot :
im using new version of react native
You are missing the render() method where the return() method should be.
Ex:
export default class LotsOfStyles extends Component {
render() {
return (
<View>
<Text style={styles.red}>just red</Text>
<Text style={styles.bigBlue}>just bigBlue</Text>
<Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>
<Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>
</View>
);
}
}
from react native docs
I am trying to push a component when initial component is about to render. I am using the react-native-router-flux module. Unfortunately the Action.checkpass call does not execute while the one in Button tag does (i.e on click).
Any ideas what I could be doing wrong?
class Launch extends React.Component {
render(){
//transfer to checkpass
Actions.checkpass;
return (
<View style={styles.container}>
<Text>Launch page</Text>
<Button onPress={Actions.checkpass}>Go to Register page</Button>
</View>
);
}
};
Call Actions.route('checkpass');