defaultProps in React Native?

Question

Is it possible to use defaultProps in React Native? I’ve tried the following 2 ways of defining defaultProps and I get null when trying to access the defaultProp

export default class Foo extends Component {
  // 1. define defaultProps within Class
  static defaultProps = {
    someData: 'Hello',
  }

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    console.log(this.props.someData);
  }

  render() {
    return (
      <View> {this.props.someData} </View>
    )
  }
}
  // 2. define defaultProps outside Class
Foo.defaultProps = { someData: 'Hello' }

flaky · Answer 1 · 2020-06-05T16:05:25.323

19

I always do it like this and it works just fine:

class Foo extends React.Component {};

Foo.propTypes = {
  animateBackground: PropTypes.bool
};

Foo.defaultProps = {
  animateBackground: false
};

export default Foo;

edited Jun 05 '20 at 16:05

answered Aug 11 '17 at 12:05

flaky

6,816
4
29
46

Ajay · Answer 2 · 2019-03-18T11:19:02.703

I do it in ReactNative

import React, {
    Component
} from 'react';
import {
    View,
    Text
} from 'react-native';
import PropTypes from 'prop-types';

export default class foo extends Component {
    static propTypes = {
        name: PropTypes.array,
        prop2: PropTypes.string
    }
    static defaultProps = {
        array: [1, 2, 4],
        name: 'abc'
    }
    constructor(props) {
        super(props);
        this.state = {};
    }
    render() {
        return (
            <View>
                <Text>Default Prop array is: {this.props.array}</Text>
                <Text>Default Prop name is: {this.props.name}</Text>
            </View>
        );
    }
}

And then you can use these props like this.props.prop1 and this.props.prop2.

score 0 · Answer 3 · answered Jan 09 '23 at 08:35

I uses in this way ,try this!

import React,{Component} from 'react'
import {View, Text} from 'react-native';
export default class Example extends Component {
  render() {
    return (
      <View>
        <Text>{this.props.name}</Text>
      </View>
    )
  }
}

Example.defaultProps = {
  name: 'John'
}

score -1 · Answer 4 · answered Mar 27 '17 at 02:19

You want this:

Foo.propTypes = {
    someData: React.PropTypes.string
};

This says that someData should be a string, but it is not required.

Then in your render(), you can do this:

render() {
    return (
      <View> 
        {this.props.someData || Foo.defaultProps.someData} 
      </View>
    );
  }

This will use this.props.someData if it's provided or Foo.defaultProps.someData if not.

I also think you need to wrap {this.props.someData || Foo.defaultProps.someData} in a Text element (i.e., <Text>{this.props.someData || Foo.defaultProps.someData}</Text>).

defaultProps in React Native?

4 Answers4

Linked