Header Shell with Dynamic Content in Top Half

Screen is created using these React Native Core Components: <SafeAreaView />, <View />, <ScrollView />, <Text />, <TouchableOpacity />, <Image />

import React from 'react';
import { StyleSheet, Text, SafeAreaView, ScrollView, StatusBar } from 'react-native';

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView style={styles.scrollView}>
        <Text style={styles.text}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
          <Text style={styles.text}>in voluptate velit esse cillum dolore eu fugiat nulla</Text>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: StatusBar.currentHeight,
  scrollView: {
    backgroundColor: 'pink',
    marginHorizontal: 20,
  text: {
    fontSize: 42,

export default App;

Explore more components

Over 100 Ready to Use React Native Components for all your needs.

Never miss a beat

Stay in the loop with our latest updates and offers - no spam, just the good stuff!