Skip to content

Commit 9d8aadf

Browse files
okwasniewskiokwasniewski
authored
feat: introduce ignoresTopSafeArea, refactor config fields (#28)
* refactor: change config to separate fields * feat: introduce ignoresTopSafeArea prop * chore: remove Cocoapods cache
1 parent ebccdbe commit 9d8aadf

File tree

12 files changed

+195
-196
lines changed

12 files changed

+195
-196
lines changed

‎.github/workflows/ci.yml‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -133,17 +133,6 @@ jobs:
133133
echo "turbo_cache_hit=1" >> $GITHUB_ENV
134134
fi
135135
136-
- name: Cache cocoapods
137-
if: env.turbo_cache_hit != 1
138-
id: cocoapods-cache
139-
uses: actions/cache@v3
140-
with:
141-
path: |
142-
**/ios/Pods
143-
key: ${{ runner.os }}-cocoapods-${{ hashFiles('example/ios/Podfile.lock') }}
144-
restore-keys: |
145-
${{ runner.os }}-cocoapods-
146-
147136
- name: Install cocoapods
148137
if: env.turbo_cache_hit != 1 && steps.cocoapods-cache.outputs.cache-hit != 'true'
149138
run: |

‎android/src/main/java/com/rcttabview/RCTTabView.kt‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -117,10 +117,10 @@ class ReactBottomNavigationView(context: Context) : BottomNavigationView(context
117117
}
118118
}
119119

120-
fun setConfig(config: TabViewConfig) {
121-
labelVisibilityMode = if (config.labeled == false) {
120+
fun setLabeled(labeled: Boolean?) {
121+
labelVisibilityMode = if (labeled == false) {
122122
LABEL_VISIBILITY_UNLABELED
123-
} else if (config.labeled == true) {
123+
} else if (labeled == true) {
124124
LABEL_VISIBILITY_LABELED
125125
} else {
126126
LABEL_VISIBILITY_AUTO

‎android/src/main/java/com/rcttabview/RCTTabViewViewManager.kt‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ package com.rcttabview
22

33
import android.view.View.MeasureSpec
44
import com.facebook.react.bridge.ReadableArray
5-
import com.facebook.react.bridge.ReadableMap
65
import com.facebook.react.common.MapBuilder
76
import com.facebook.react.module.annotations.ReactModule
87
import com.facebook.react.uimanager.LayoutShadowNode
@@ -23,10 +22,6 @@ data class TabInfo(
2322
val badge: String
2423
)
2524

26-
data class TabViewConfig(
27-
val labeled: Boolean?
28-
)
29-
3025
@ReactModule(name = RCTTabViewViewManager.NAME)
3126
class RCTTabViewViewManager :
3227
SimpleViewManager<ReactBottomNavigationView>() {
@@ -60,12 +55,11 @@ class RCTTabViewViewManager :
6055
}
6156
}
6257

63-
@ReactProp(name = "config")
64-
fun setConfig(view: ReactBottomNavigationView, config: ReadableMap?) {
65-
val tabViewConfig = TabViewConfig(
66-
labeled = if (config?.hasKey("labeled") == true) config.getBoolean("labeled") else null,
67-
)
68-
view.setConfig(tabViewConfig)
58+
59+
60+
@ReactProp(name = "labeled")
61+
fun setLabeled(view: ReactBottomNavigationView, flag: Boolean?) {
62+
view.setLabeled(flag)
6963
}
7064

7165
@ReactProp(name = "icons")
@@ -135,4 +129,12 @@ class RCTTabViewViewManager :
135129
MapBuilder.of("registrationName", "onPageSelected"),
136130
)
137131
}
132+
133+
// iOS Props
134+
135+
@ReactProp(name = "sidebarAdaptable")
136+
fun setSidebarAdaptable(view: ReactBottomNavigationView, flag: Boolean) {}
137+
138+
@ReactProp(name = "ignoresTopSafeArea")
139+
fun setIgnoresTopSafeArea(view: ReactBottomNavigationView, flag: Boolean) {}
138140
}

‎example/src/App.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,18 +23,27 @@ import SFSymbols from './Examples/SFSymbols';
2323
import LabeledTabs from './Examples/Labeled';
2424
import NativeBottomTabs from './Examples/NativeBottomTabs';
2525

26+
const FourTabsIgnoreSafeArea = () => {
27+
return <FourTabs ignoresTopSafeArea />;
28+
};
29+
2630
const examples = [
2731
{ component: ThreeTabs, name: 'Three Tabs' },
2832
{ component: FourTabs, name: 'Four Tabs' },
2933
{ component: SFSymbols, name: 'SF Symbols' },
3034
{ component: LabeledTabs, name: 'Labeled Tabs' },
3135
{
32-
component: FourTabs,
36+
component: FourTabsIgnoreSafeArea,
3337
name: 'Four Tabs - No header',
3438
screenOptions: { headerShown: false },
3539
},
3640
{ component: NativeBottomTabs, name: 'Native Bottom Tabs' },
3741
{ component: JSBottomTabs, name: 'JS Bottom Tabs' },
42+
{
43+
component: JSBottomTabs,
44+
name: 'JS Bottom Tabs - No header',
45+
screenOptions: { headerShown: false },
46+
},
3847
{ component: MaterialBottomTabs, name: 'Material (JS) Bottom Tabs' },
3948
];
4049

‎example/src/Examples/FourTabs.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,11 @@ import { Albums } from '../Screens/Albums';
55
import { Contacts } from '../Screens/Contacts';
66
import { Chat } from '../Screens/Chat';
77

8-
export default function FourTabs() {
8+
interface Props {
9+
ignoresTopSafeArea?: boolean;
10+
}
11+
12+
export default function FourTabs({ ignoresTopSafeArea = false }: Props) {
913
const [index, setIndex] = useState(0);
1014
const [routes] = useState([
1115
{
@@ -42,6 +46,7 @@ export default function FourTabs() {
4246

4347
return (
4448
<TabView
49+
ignoresTopSafeArea={ignoresTopSafeArea}
4550
sidebarAdaptable
4651
navigationState={{ index, routes }}
4752
onIndexChange={setIndex}

‎example/src/Screens/Albums.tsx‎

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import {
22
Image,
33
Platform,
4-
SafeAreaView,
54
ScrollView,
65
type ScrollViewProps,
76
StyleSheet,
@@ -43,24 +42,22 @@ export function Albums(props: Partial<ScrollViewProps>) {
4342
const itemSize = dimensions.width / Math.floor(dimensions.width / 150);
4443

4544
return (
46-
<SafeAreaView>
47-
<ScrollView contentContainerStyle={styles.content} {...props}>
48-
{COVERS.map((source, i) => (
49-
<View
50-
key={i}
51-
style={[
52-
styles.item,
53-
Platform.OS !== 'web' && {
54-
height: itemSize,
55-
width: itemSize,
56-
},
57-
]}
58-
>
59-
<Image source={source} resizeMode="cover" style={styles.photo} />
60-
</View>
61-
))}
62-
</ScrollView>
63-
</SafeAreaView>
45+
<ScrollView contentContainerStyle={styles.content} {...props}>
46+
{COVERS.map((source, i) => (
47+
<View
48+
key={i}
49+
style={[
50+
styles.item,
51+
Platform.OS !== 'web' && {
52+
height: itemSize,
53+
width: itemSize,
54+
},
55+
]}
56+
>
57+
<Image source={source} resizeMode="cover" style={styles.photo} />
58+
</View>
59+
))}
60+
</ScrollView>
6461
);
6562
}
6663

‎example/src/Screens/Article.tsx‎

Lines changed: 87 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import {
33
Button,
44
Image,
55
Platform,
6-
SafeAreaView,
76
ScrollView,
87
type ScrollViewProps,
98
StyleSheet,
@@ -50,98 +49,95 @@ export function Article({
5049

5150
console.log(Platform.OS, ' Rendering Article');
5251
return (
53-
<SafeAreaView>
54-
<ScrollView
55-
ref={ref}
56-
style={{ backgroundColor: '#fff' }}
57-
contentContainerStyle={styles.content}
58-
{...rest}
59-
>
60-
<View style={styles.author}>
61-
<Image
62-
style={styles.avatar}
63-
source={require('../../assets/avatar-1.png')}
64-
/>
65-
<View style={styles.meta}>
66-
<Text style={[styles.name, { color: '#000' }]}>{author.name}</Text>
67-
<Text style={[styles.timestamp, { color: '#000' }]}>{date}</Text>
68-
</View>
69-
</View>
70-
<Button
71-
title="Go to Albums"
72-
onPress={() => {
73-
jumpTo?.('albums');
74-
}}
75-
/>
76-
<Heading>What is Lorem Ipsum?</Heading>
77-
<Paragraph>
78-
Lorem Ipsum is simply dummy text of the printing and typesetting
79-
industry. Lorem Ipsum has been the industry&apos;s standard dummy text
80-
ever since the 1500s, when an unknown printer took a galley of type
81-
and scrambled it to make a type specimen book. It has survived not
82-
only five centuries, but also the leap into electronic typesetting,
83-
remaining essentially unchanged. It was popularised in the 1960s with
84-
the release of Letraset sheets containing Lorem Ipsum passages, and
85-
more recently with desktop publishing software like Aldus PageMaker
86-
including versions of Lorem Ipsum.
87-
</Paragraph>
52+
<ScrollView
53+
ref={ref}
54+
style={{ backgroundColor: '#fff' }}
55+
contentContainerStyle={styles.content}
56+
{...rest}
57+
>
58+
<View style={styles.author}>
8859
<Image
89-
style={styles.image}
90-
resizeMode="cover"
91-
source={require('../../assets/book.jpg')}
60+
style={styles.avatar}
61+
source={require('../../assets/avatar-1.png')}
9262
/>
93-
<Heading>Where does it come from?</Heading>
94-
<Paragraph>
95-
Contrary to popular belief, Lorem Ipsum is not simply random text. It
96-
has roots in a piece of classical Latin literature from 45 BC, making
97-
it over 2000 years old. Richard McClintock, a Latin professor at
98-
Hampden-Sydney College in Virginia, looked up one of the more obscure
99-
Latin words, consectetur, from a Lorem Ipsum passage, and going
100-
through the cites of the word in classical literature, discovered the
101-
undoubtable source. Lorem Ipsum comes from sections 1.10.32 and
102-
1.10.33 of &quot;de Finibus Bonorum et Malorum&quot; (The Extremes of
103-
Good and Evil) by Cicero, written in 45 BC. This book is a treatise on
104-
the theory of ethics, very popular during the Renaissance. The first
105-
line of Lorem Ipsum, &quot;Lorem ipsum dolor sit amet..&quot;, comes
106-
from a line in section 1.10.32.
107-
</Paragraph>
108-
<Paragraph>
109-
The standard chunk of Lorem Ipsum used since the 1500s is reproduced
110-
below for those interested. Sections 1.10.32 and 1.10.33 from &quot;de
111-
Finibus Bonorum et Malorum&quot; by Cicero are also reproduced in
112-
their exact original form, accompanied by English versions from the
113-
1914 translation by H. Rackham.
114-
</Paragraph>
115-
<Heading>Why do we use it?</Heading>
116-
<Paragraph>
117-
It is a long established fact that a reader will be distracted by the
118-
readable content of a page when looking at its layout. The point of
119-
using Lorem Ipsum is that it has a more-or-less normal distribution of
120-
letters, as opposed to using &quot;Content here, content here&quot;,
121-
making it look like readable English. Many desktop publishing packages
122-
and web page editors now use Lorem Ipsum as their default model text,
123-
and a search for &quot;lorem ipsum&quot; will uncover many web sites
124-
still in their infancy. Various versions have evolved over the years,
125-
sometimes by accident, sometimes on purpose (injected humour and the
126-
like).
127-
</Paragraph>
128-
<Heading>Where can I get some?</Heading>
129-
<Paragraph>
130-
There are many variations of passages of Lorem Ipsum available, but
131-
the majority have suffered alteration in some form, by injected
132-
humour, or randomised words which don&apos;t look even slightly
133-
believable. If you are going to use a passage of Lorem Ipsum, you need
134-
to be sure there isn&apos;t anything embarrassing hidden in the middle
135-
of text. All the Lorem Ipsum generators on the Internet tend to repeat
136-
predefined chunks as necessary, making this the first true generator
137-
on the Internet. It uses a dictionary of over 200 Latin words,
138-
combined with a handful of model sentence structures, to generate
139-
Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is
140-
therefore always free from repetition, injected humour, or
141-
non-characteristic words etc.
142-
</Paragraph>
143-
</ScrollView>
144-
</SafeAreaView>
63+
<View style={styles.meta}>
64+
<Text style={[styles.name, { color: '#000' }]}>{author.name}</Text>
65+
<Text style={[styles.timestamp, { color: '#000' }]}>{date}</Text>
66+
</View>
67+
</View>
68+
<Button
69+
title="Go to Albums"
70+
onPress={() => {
71+
jumpTo?.('albums');
72+
}}
73+
/>
74+
<Heading>What is Lorem Ipsum?</Heading>
75+
<Paragraph>
76+
Lorem Ipsum is simply dummy text of the printing and typesetting
77+
industry. Lorem Ipsum has been the industry&apos;s standard dummy text
78+
ever since the 1500s, when an unknown printer took a galley of type and
79+
scrambled it to make a type specimen book. It has survived not only five
80+
centuries, but also the leap into electronic typesetting, remaining
81+
essentially unchanged. It was popularised in the 1960s with the release
82+
of Letraset sheets containing Lorem Ipsum passages, and more recently
83+
with desktop publishing software like Aldus PageMaker including versions
84+
of Lorem Ipsum.
85+
</Paragraph>
86+
<Image
87+
style={styles.image}
88+
resizeMode="cover"
89+
source={require('../../assets/book.jpg')}
90+
/>
91+
<Heading>Where does it come from?</Heading>
92+
<Paragraph>
93+
Contrary to popular belief, Lorem Ipsum is not simply random text. It
94+
has roots in a piece of classical Latin literature from 45 BC, making it
95+
over 2000 years old. Richard McClintock, a Latin professor at
96+
Hampden-Sydney College in Virginia, looked up one of the more obscure
97+
Latin words, consectetur, from a Lorem Ipsum passage, and going through
98+
the cites of the word in classical literature, discovered the
99+
undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
100+
of &quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good and
101+
Evil) by Cicero, written in 45 BC. This book is a treatise on the theory
102+
of ethics, very popular during the Renaissance. The first line of Lorem
103+
Ipsum, &quot;Lorem ipsum dolor sit amet..&quot;, comes from a line in
104+
section 1.10.32.
105+
</Paragraph>
106+
<Paragraph>
107+
The standard chunk of Lorem Ipsum used since the 1500s is reproduced
108+
below for those interested. Sections 1.10.32 and 1.10.33 from &quot;de
109+
Finibus Bonorum et Malorum&quot; by Cicero are also reproduced in their
110+
exact original form, accompanied by English versions from the 1914
111+
translation by H. Rackham.
112+
</Paragraph>
113+
<Heading>Why do we use it?</Heading>
114+
<Paragraph>
115+
It is a long established fact that a reader will be distracted by the
116+
readable content of a page when looking at its layout. The point of
117+
using Lorem Ipsum is that it has a more-or-less normal distribution of
118+
letters, as opposed to using &quot;Content here, content here&quot;,
119+
making it look like readable English. Many desktop publishing packages
120+
and web page editors now use Lorem Ipsum as their default model text,
121+
and a search for &quot;lorem ipsum&quot; will uncover many web sites
122+
still in their infancy. Various versions have evolved over the years,
123+
sometimes by accident, sometimes on purpose (injected humour and the
124+
like).
125+
</Paragraph>
126+
<Heading>Where can I get some?</Heading>
127+
<Paragraph>
128+
There are many variations of passages of Lorem Ipsum available, but the
129+
majority have suffered alteration in some form, by injected humour, or
130+
randomised words which don&apos;t look even slightly believable. If you
131+
are going to use a passage of Lorem Ipsum, you need to be sure there
132+
isn&apos;t anything embarrassing hidden in the middle of text. All the
133+
Lorem Ipsum generators on the Internet tend to repeat predefined chunks
134+
as necessary, making this the first true generator on the Internet. It
135+
uses a dictionary of over 200 Latin words, combined with a handful of
136+
model sentence structures, to generate Lorem Ipsum which looks
137+
reasonable. The generated Lorem Ipsum is therefore always free from
138+
repetition, injected humour, or non-characteristic words etc.
139+
</Paragraph>
140+
</ScrollView>
145141
);
146142
}
147143

‎ios/RCTTabViewViewManager.mm‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ - (UIView *)view
2727
RCT_EXPORT_VIEW_PROPERTY(selectedPage, NSString)
2828
RCT_EXPORT_VIEW_PROPERTY(tabViewStyle, NSString)
2929
RCT_EXPORT_VIEW_PROPERTY(icons, NSArray<RCTImageSource *>);
30-
RCT_EXPORT_VIEW_PROPERTY(config, NSDictionary)
30+
RCT_EXPORT_VIEW_PROPERTY(sidebarAdaptable, BOOL)
31+
RCT_EXPORT_VIEW_PROPERTY(labeled, BOOL)
32+
RCT_EXPORT_VIEW_PROPERTY(ignoresTopSafeArea, BOOL)
3133

3234
@end

0 commit comments

Comments
 (0)