How to add multiple components in React Native?

Question

Note: I am new to React Native and have searched up how to do this but found no helpful results I am using React Native to create an app and want to add multiple components, such as text, buttons, and a text input space, but am having trouble doing so without receiving errors. Is there any way to include multiple components into one javascript document using React Native?

The code I currently have:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Text style={styles.bigblack}>Sample Bold Text Here</Text>
        <Text>Sample Text Here:</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  bigblack: {
    color: 'black',
    fontWeight: 'bold',
    fontSize: 28,
  },
  red: {
    color: 'red',
  },
  container: {
    flex: 1,
    backgroundColor: '#fdf5e6',
    alignItems: 'center',
    justifyContent: 'center',
  },

});

Code I want to add for Text Input:

class UselessTextInput extends Component {
  render() {
    return (
      <TextInput
        {...this.props} 
        editable = {true}
        maxLength = {40}
      />
    );
  }
}

export default class UselessTextInputMultiline extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: 'Useless Multiline Placeholder',
    };
  }

  render() {
    return (
     <View style={{
       backgroundColor: this.state.text,
       borderBottomColor: '#000000',
       borderBottomWidth: 1 }}
     >
       <UselessTextInput
         multiline = {true}
         numberOfLines = {4}
         onChangeText={(text) => this.setState({text})}
         value={this.state.text}
       />
     </View>
    );
  }
}

Code I want to add for Button:

<Button
  onPress={onPressLearnMore}
  title="Learn More"
  color="#841584"
  accessibilityLabel="Learn more about this button"
/>

Jigar Shah · Accepted Answer · 2017-07-17 10:02:46Z

5

You can create multiple component in same document but can export default only one.

So you can create multiple component like below:

export class UselessTextInput {}

export class UselessTextInputMultiline {}

export class Button {}

while accessing :

import {UselessTextInput, UselessTextInputMultiline, Button} from './components/customInput' // change with your respective path

if you still want to have single export default then:

export default class UselessTextInputMultiline {}

and while importing

import Template,{Button} from './components/customInput'

For, exporting multiple component:

module.exports = {
    text: UselessTextInput,
    btn: Button
}

imports will be like:

let txtInput= require('./components/customInput').text;
let btnInput = require('./components/customInput').btn;

answered Jul 17, 2017 at 10:02

Jigar Shah

6,2332 gold badges32 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1049876 Over a year ago

Could you explain the

import {UselessTextInput, UselessTextInputMultiline, Button} from './components/customInput' // change with your respective path

Does this mean that I need to create another .js file with these names?

Jigar Shah Over a year ago

no, I meant your current js name and path. I was not able to see your file name so I mentioned to change with respective path for your component file.

Collectives™ on Stack Overflow

How to add multiple components in React Native?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related