How can I construct container from another containers.
for example:
containerA - responsible for A
containerB - responsible for B
Container C - responsible for A + B with different Style C.
in code:
class ContainerA extends Component{
render() {
return (
<ComponentA/>
)
}
}
class ContainerB extends Component{
render() {
return (
<ComponentB/>
)
}
}
class ContainerC extends Component{
render() {
return (
<ContainerA/>
<ContainerB/>
)
}
}
When you want to group components in React Native, you can use View as such
import React, { Component } from 'react'
import { View } from 'react-native'
import ContainerA from './ContainerA'
import ContainerB from './ContainerB'
class ContainerC extends Component{
render() {
return (
<View style={styles.containerStyle}>
<ContainerA/>
<ContainerB/>
</View>
)
}
}
const styles = {
containerStyle = {
// ...
}
}
Related
Using react-native I don't understand, how I have to populate changes to nested structures.
I created a simple sample.
Parent owns a Button. When pressed, the clickcount within the parent will be increased.
How do I achieve that Child' clickcount will also be increased? (in my real world scenario I want specific childs to be re-rendered. I understand that I have to change some state therefore)
Parent
var React = require('react');
import { StyleSheet, Text, View, Button } from 'react-native';
import Child from './Child';
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
clickcount: this.props.clickcount,
}
child = (<Child clickcount={this.state.clickcount}/>);
}
handlePress() {
console.log('Parent handlePress');
this.increment();
}
increment() {
this.setState({clickcount: this.state.clickcount+1});
}
render() {
return (
<View>
<Text>Parent {this.state.clickcount}</Text>
<Button
title="OK"
onPress={() => this.handlePress()}
/>
</View>
);
}
}
export default Parent;
Child
var React = require('react');
import { StyleSheet, Text, View, Button } from 'react-native';
class Child extends React.Component {
constructor(props) {
super(props);
this.state = {
clickcount: this.props.clickcount,
}
}
handlePress() {
console.log('Child handlePress');
this.increment();
}
increment() {
this.setState({clickcount: this.state.clickcount+1});
}
render() {
return (
<View>
<Text>Child {this.state.clickcount}</Text>
</View>
);
}
}
export default Child;
Currently, after 3x click the output looks like:
Parent 3
Child 0
You can pass the increment function to the child so the parent owns the click count
class Child extends React.Component {
render() {
return (
<div>
<button onClick={this.props.increment}/>
{this.props.clickCount}
</div>
)
}
}
class Parent extends React.Component {
state = {
clickCount: 0
}
increment = () => {
this.setState({ clickCount: this.state.clickCount + 1 })
}
render () {
return (
<Child increment={() => this.increment()} clickCount={this.state.clickCount}/>
)
}
}
The function componentDidMount is not firing.
This is some of my code:
import React, { Component } from 'react';
import { Block } from 'galio-framework';
export function FriendRequests ( ) {
const username = 'abcd';
componentDidMount = () => {
alert("abcd");
}
return (
line number 37: <Block>....</Block>
)
}
You are using the functional component which doesn't have the lifecycle methods.
Solution 1:
import React, { Component } from 'react';
import { View, Text } from 'react-native';
class FriendRequests extends Component {
constructor(props) {
super(props);
this.state = {
};
}
componentDidMount = () => {
alert("abcd");
}
render() {
return (
<View>
<Text> Your text Here </Text>
</View>
);
}
}
export default FriendRequests;
Solution 2:
If you want to use it as functional component then you can use the React Hook and can make use of useEffect() method from the hook instead of componentDidMount. method to handle after render stuff.
First of all,
export function FriendRequests ( ) {
componentDidMount = () => {
alert("abcd");
}
return (
....
)
}
this is a functional component, and functional component dont have any inbuilt functions like componentDidMount. Only class based components have access, So try this:
UPDATE:
export class FriendRequests extends React.Component {
componentDidMount() {
alert("abcd");
}
render() {
return (
<View>
<Text>hey</Text>
</View>
);
}
}
hope it helps. feel free for doubts
import * as FacebookAds from 'expo-ads-facebook';
const { AdTriggerView, AdMediaView } = FacebookAds;
class AdComponent extends React.Component {
render() {
return (
{this.props.nativeAd.bodyText}
);
}
}
export default FacebookAds.withNativeAd(AdComponent);
I extending base class (Class A) that uses redux and I want to call and override function in base class but it not working. Give me solutions thank you.
Parent Class: https://ibb.co/bNzPRZ6
Child Class: https://ibb.co/vX1xPvq
Result: https://ibb.co/GFYRtQY
Parent Class:
import React, { Component } from 'react';
import { View } from 'react-native';
import { connect } from 'react-redux'
class ClassA extends Component {
showAlertMess(message) {
alert(message)
}
render() {
return (
<View></View>
);
}
}
export default connect()(ClassA)
Child Class:
import React, { Component } from 'react';
import { View } from 'react-native';
import ClassA from './classA';
export default class ClassB extends ClassA {
state = { }
componentDidMount(){
this.showAlertMess("This is class B")
}
render() {
return (
<View></View>
);
}
}
My problem is That I want to access a Container in a component but it seems to be undefined.
undefined alert image
I am using Unstated and as you can see this is my code in the container file (login-container.js):
import { Container } from 'unstated'
class LoginContainer extends Container {
constructor(props){
super(props)
this.state = {
stepNumber: 0,
}
}
}
export default new LoginContainer()
And this is app.js:
import React, { Component } from 'react'
import { createStackNavigator, createSwitchNavigator } from 'react-navigation'
import { Provider } from 'unstated'
import LoginContainer from './containers/login-container'
import Home from './screens/home'
import Splash from './screens/splash'
import Login from './screens/login'
import Intro from './screens/intro'
export default class App extends Component {
render() {
return (
<Provider inject={[LoginContainer]}>
<AuthStack/>
</Provider>
)
}
}
const SplashStack = createStackNavigator(...)
const AppStack = createStackNavigator(...)
const AuthStack = createStackNavigator(
{
Intro: { screen: Intro},
Login: { screen: Login}
},
{
headerMode: "none",
initialRouteName: "Intro"
}
)
const SwitchNavigator = createSwitchNavigator(...)
And this would be login.js:
import React, { Component } from 'react'
import { Text, View } from 'react-native'
export default class Login extends Component {
constructor(props){
super(props)
}
render() {
// const { state: {stepNumber} } = this.props.loginContainer
alert(this.props.LoginContainer)
return (
<View>
<Text> someText </Text>
</View>
)
}
}
I previously tried to use Subscribe component to inject the container to my app but I got the same thing I am getting here.
Using
- react-native 0.58.6
- react-navigation 2.13.0 (due to some bugs in v3)
- unstated 2.1.1
What's really great about Unstated is how simple it is to implement.
Just wrap your render component in Unstated's <Subscribe to></Subscribe> tags and you're good to go. Whenever you setState() in the Container, all Components that Subscribe to it get re-rendered with the Container's updated state property values available to them.
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { Subscribe } from 'unstated';
import LoginContainer from './containers/login-container';
export default class Login extends Component {
constructor(props){
super(props)
}
render() {
return (
<Subscribe to={[LoginContainer, AnotherContainer]}>
{(container, another) => (
<View>
<Text>{container.state.stepNumber}</Text>
</View>
})
</Subscribe>
);
}
}
UPDATE: Or do it in this HOC way. After creating this:
WithUnstated.js
import React, { PureComponent } from "react";
import { Subscribe } from "unstated";
import DefaultStore from "../store/DefaultStore";
const withUnstated = (
WrappedComponent,
Stores = [DefaultStore],
navigationOptions
) =>
class extends PureComponent {
static navigationOptions = navigationOptions;
render() {
return (
<Subscribe to={Stores}>
{(...stores) => {
const allStores = stores.reduce(
(acc, v) => ({ ...acc, [v.displayName]: { ...v } }),
{}
);
return <WrappedComponent {...allStores} {...this.props} />;
}}
</Subscribe>
);
}
};
export default withUnstated;
Then wrap your component like so:
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { Subscribe } from 'unstated';
import LoginContainer from './containers/login-container';
import AnotherContainer from './containers/another-container';
class Login extends Component {
constructor(props){
super(props)
}
render() {
const {LoginContainer: container} = this.props;
return (
<View>
<Text>{container.state.stepNumber}</Text>
</View>
);
}
}
export default withUnstated(Login, [LoginContainer, AnotherContainer])