callstackincubator · okwasniewski · Oct 15, 2024 · Oct 14, 2024
diff --git a/README.md b/README.md
@@ -197,6 +197,16 @@ export default function ThreeTabs() {
 }
 ```
 
+### ScrollView
+
+If you expirence issues with ScrollView content being below the tab bar, add `contentInsetAdjustmentBehavior="automatic"` to the ScrollView component.
+
+
+```tsx
+<ScrollView contentInsetAdjustmentBehavior="automatic">
+  {/* content */}
+</ScrollView>
+```
 
 ## Contributing
 

diff --git a/example/src/Screens/Albums.tsx b/example/src/Screens/Albums.tsx
@@ -42,7 +42,11 @@ export function Albums(props: Partial<ScrollViewProps>) {
   const itemSize = dimensions.width / Math.floor(dimensions.width / 150);
 
   return (
-    <ScrollView contentContainerStyle={styles.content} {...props}>
+    <ScrollView
+      contentContainerStyle={styles.content}
+      contentInsetAdjustmentBehavior="automatic"
+      {...props}
+    >
       {COVERS.map((source, i) => (
         <View
           key={i}

diff --git a/example/src/Screens/Article.tsx b/example/src/Screens/Article.tsx
@@ -23,7 +23,7 @@
  style,
  ...rest
 }: TextProps & { children: React.ReactNode }) => {
  return <Text style={[styles.heading, { color: '#000' }, style]} {...rest} />;
 };

 const Paragraph = ({
@@ -31,7 +31,7 @@
  ...rest
 }: TextProps & { children: React.ReactNode }) => {
  return (
    <Text style={[styles.paragraph, { color: '#000' }, style]} {...rest} />
  );
 };

@@ -51,8 +51,9 @@
  return (
    <ScrollView
       ref={ref}
       style={{ backgroundColor: '#fff' }}
       contentContainerStyle={styles.content}
+      contentInsetAdjustmentBehavior="automatic"
       {...rest}
     >
       <View style={styles.author}>
@@ -61,7 +62,7 @@
          source={require('../../assets/avatar-1.png')}
        />
        <View style={styles.meta}>
          <Text style={[styles.name, { color: '#000' }]}>{author.name}</Text>
          <Text style={[styles.timestamp, { color: '#000' }]}>{date}</Text>
        </View>
      </View>

diff --git a/example/src/Screens/Chat.tsx b/example/src/Screens/Chat.tsx
@@ -28,6 +28,7 @@ export function Chat({
       style={styles.container}
     >
       <ScrollView
+        contentInsetAdjustmentBehavior="automatic"
         style={styles.inverted}
         contentContainerStyle={styles.content}
         {...rest}

diff --git a/example/src/Screens/Contacts.tsx b/example/src/Screens/Contacts.tsx
@@ -99,6 +99,7 @@ export function Contacts({ query, ...rest }: Props) {
   return (
     <SafeAreaView>
       <FlatList
+        contentInsetAdjustmentBehavior="automatic"
         {...rest}
         data={
           query

diff --git a/example/src/App.tsx b/example/src/App.tsx
            name="BottomTabs Example"
            component={App}
            options={{
              headerRight: () => (
                <Button
                  onPress={() =>
                    Alert.alert(
diff --git a/example/src/Examples/MaterialBottomTabs.tsx b/example/src/Examples/MaterialBottomTabs.tsx
 const Tab = createMaterialBottomTabNavigator();

 const TabBarIcon = ({ source }: { source: ImageSourcePropType }) => (
  <Image style={{ width: 20, height: 23 }} source={source} />
 );

 function MaterialBottomTabs() {
        name="Article"
        component={Article}
        options={{
          tabBarIcon: () => (
            <TabBarIcon
              source={require('../../assets/icons/article_dark.png')}
            />
        name="Albums"
        component={Albums}
        options={{
          tabBarIcon: () => (
            <TabBarIcon source={require('../../assets/icons/grid_dark.png')} />
          ),
        }}
        name="Contacts"
        component={Contacts}
        options={{
          tabBarIcon: () => (
            <TabBarIcon
              source={require('../../assets/icons/person_dark.png')}
            />
        name="Chat"
        component={Chat}
        options={{
          tabBarIcon: () => (
            <TabBarIcon source={require('../../assets/icons/chat_dark.png')} />
          ),
        }}
diff --git a/ios/PageSelectedEvent.swift b/ios/PageSelectedEvent.swift
  func arguments() -> [Any] {
    return [
      viewTag,
      RCTNormalizeInputEventName(eventName),
      [
        "key": key
      ]
	name="BottomTabs Example"
	component={App}
	options={{
	headerRight: () => (
Check warning on line 86 in example/src/App.tsx GitHub Actions / lint `Do not define components during render. React will see a new component type on every render and destroy the entire subtree’s DOM nodes and state (https://reactjs.org/docs/reconciliation.html#elements-of-different-types). Instead, move this component definition out of the parent component “Navigation” and pass data as props. If you want to allow component creation in props, set allowAsProps option to true`
	<Button
	onPress={() =>
	Alert.alert(
	const Tab = createMaterialBottomTabNavigator();

	const TabBarIcon = ({ source }: { source: ImageSourcePropType }) => (
	<Image style={{ width: 20, height: 23 }} source={source} />
Check warning on line 11 in example/src/Examples/MaterialBottomTabs.tsx GitHub Actions / lint `Inline style: { width: 20, height: 23 }`
	);

	function MaterialBottomTabs() {
	name="Article"
	component={Article}
	options={{
	tabBarIcon: () => (
Check warning on line 21 in example/src/Examples/MaterialBottomTabs.tsx GitHub Actions / lint `Do not define components during render. React will see a new component type on every render and destroy the entire subtree’s DOM nodes and state (https://reactjs.org/docs/reconciliation.html#elements-of-different-types). Instead, move this component definition out of the parent component “MaterialBottomTabs” and pass data as props. If you want to allow component creation in props, set allowAsProps option to true`
	<TabBarIcon
	source={require('../../assets/icons/article_dark.png')}
	/>
	name="Albums"
	component={Albums}
	options={{
	tabBarIcon: () => (
Check warning on line 32 in example/src/Examples/MaterialBottomTabs.tsx GitHub Actions / lint `Do not define components during render. React will see a new component type on every render and destroy the entire subtree’s DOM nodes and state (https://reactjs.org/docs/reconciliation.html#elements-of-different-types). Instead, move this component definition out of the parent component “MaterialBottomTabs” and pass data as props. If you want to allow component creation in props, set allowAsProps option to true`
	<TabBarIcon source={require('../../assets/icons/grid_dark.png')} />
	),
	}}
	name="Contacts"
	component={Contacts}
	options={{
	tabBarIcon: () => (
Check warning on line 41 in example/src/Examples/MaterialBottomTabs.tsx GitHub Actions / lint `Do not define components during render. React will see a new component type on every render and destroy the entire subtree’s DOM nodes and state (https://reactjs.org/docs/reconciliation.html#elements-of-different-types). Instead, move this component definition out of the parent component “MaterialBottomTabs” and pass data as props. If you want to allow component creation in props, set allowAsProps option to true`
	<TabBarIcon
	source={require('../../assets/icons/person_dark.png')}
	/>
	name="Chat"
	component={Chat}
	options={{
	tabBarIcon: () => (
Check warning on line 52 in example/src/Examples/MaterialBottomTabs.tsx GitHub Actions / lint `Do not define components during render. React will see a new component type on every render and destroy the entire subtree’s DOM nodes and state (https://reactjs.org/docs/reconciliation.html#elements-of-different-types). Instead, move this component definition out of the parent component “MaterialBottomTabs” and pass data as props. If you want to allow component creation in props, set allowAsProps option to true`
	<TabBarIcon source={require('../../assets/icons/chat_dark.png')} />
	),
	}}
	func arguments() -> [Any] {
	return [
	viewTag,
	RCTNormalizeInputEventName(eventName),
Check warning on line 30 in ios/PageSelectedEvent.swift GitHub Actions / build-ios `coercion of implicitly unwrappable value of type 'String?' to 'Any' does not unwrap optional` Check warning on line 30 in ios/PageSelectedEvent.swift GitHub Actions / build-ios `coercion of implicitly unwrappable value of type 'String?' to 'Any' does not unwrap optional`
	[
	"key": key
	]