Codecademy Logo

Core Components

Core Components

Core components are ready-to-use components available from React Native, which include <View>, <Text>, <Image>, <ScrollView>, <Button>, and <TextInput>.

<ScrollView>
  <Text>Some text</Text>
  <View>
    <Text>Some more text</Text>
    <Image
      source={{
        uri: 'https://picsum.photos/64/64',
      }}
    />
  </View>
  <TextInput
    defaultValue="You can type here"
  />
  <Button
    onPress={() => {
      alert('You tapped the button!');
    }}
    title="Press Me"
  />
</ScrollView>

Importing Core Components

You can import core components into your Expo project from the react-native package.

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

Core Components Optional Functionality

Core components may have more optional functionality, which you can configure through the props.

function App() {
  return (
    {/* Text components can be with `numberofLines` prop */}
    <Text numberOfLines={1}>
      quam elementum pulvinar etiam non quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit
    </Text>
  );
}

<View> Component

The <View> component is a generic “visible” container without any semantic meaning or noticeable performance impact, best translated as <div> from web.

function App() {
  return (
    {/* Base layout structure */}
    <View style={{ flex: 1 }}>
      {/* Simple background color */}
      <View style={{ padding: 8, color: 'red' }}>
        <Text>Text with background color</Text>
      </View>
      {/* Space layout structure */}
      <View style={{ margin: 16 }} />
    </View>
  );
}

<ScrollView> Component

The <ScrollView> component is a generic “visible” container with scrolling, but it’s less performant than <View>, making it less suitable for simple styling and short lines of text.

function App() {
  return (
    <ScrollView>
      <Text style={{ margin: 16 }}>Scroll here to see more!</Text>
      <View style={{ marginTop: 1024 }} />
      <Text style={{ margin: 16 }}>Made you look!</Text>
    </ScrollView>
  );
}

<Text> Component

The <Text> component is the only way to display text in React Native. These components can be nested to inherit and modify styling.

<Text style={{ height: 40, borderWidth: 1 }}>
  Here's some text!
</Text>

<TextInput> Component

The <TextInput> component can capture alphanumeric input from the user. Its behavior can be modified with the onChangeText prop, which accepts a function.

const [input, setInput] = useState('');  


// example use of input
console.log(input);  


return (
  <TextInput   
    placeholder="What is your name?"   
    onChangeText={setInput}  
  />
);

Business-Logic Focused Components

Creating business-logic focused components is done by “composing” components into one and connecting functionality by passing props and event handlers.

function ReadMoreParagraph(props) {
  const [isOpen, setOpen] = useState(false);


  return (
    <View style={{ flex: 1, flexDirection: 'column' }}>
      <Text style={{ fontSize: 16 }} numberOfLines={!isOpen ? 2 : undefined}>
        {props.children}
      </Text>
      {!isOpen
        ? <Button title='Read More' onPress={() => setOpen(true)} />
        : <Button title='Read Less' onPress={() => setOpen(false)} />
    </View>
  )
}

Custom Components

Similar to React, it’s common to create custom components to wrap configuration and usage of core components.

const App = () => (
  <View style={{ flex: 1, justifyContent: 'center' }}>
    <Box color="red" />
    <Box color="green" />
    <Box color="blue" />
  </View>
);


export const Box = (props) => (
  <View style={{ width: 100, height: 100, backgroundColor: props.color }} />
);

<Image> Component

The <Image> component is an optimized way to render images from various sources, including remote HTTP access, local assets imported with require, and base64 encoded strings.

<Image source={require('./local/asset.jpg')} />
               
<Image source={{ uri: 'https://docs.expo.io/static/images/header/sdk.svg' }} />


<Image source={{ uri: 'data:image/png;base64,<base64-string>=' }} />
Previous
Next