Skip to content

Commit f575fbb

Browse files
MoOxMoOx
authored
bs-react-native-jsx3-compat (#472)
* bs-react-native-jsx3-compat start conversion * bs-react-native-jsx3-compat wip * bs-react-native-jsx3-compat: use BsReactNative namespace * Ensure all bsconfig.json files use direct package name for easier git usage * bs-react-native-jsx3-compat fixes * bs-react-native-jsx3-compat: fix Types.insets by adding a proper conversion * Website: add migration/jsx3 docs * Fixup types
1 parent 5b9e8d1 commit f575fbb

88 files changed

Lines changed: 4720 additions & 4684 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎README.md‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,11 @@ If you use this bindings from the git repo, be sure to use
2121
"bs-dependencies": [
2222
// BsReactNative, current "stable" bindings
2323
"bs-react-native-monorepo/bs-react-native",
24-
// ReactNative, WIP on zero-cost bindings (require bs-platform 5.0.0 & and reason-react hooks branch)
24+
25+
// or alternatively, you probably wants (require bs-platform 5.0.1 & and reason-react 0.7)
26+
// bs-react-native, but compatible with jsx3
27+
"bs-react-native-monorepo/bs-react-native-jsx3-compat",
28+
// new ReactNative, WIP on zero-cost bindings
2529
"bs-react-native-monorepo/reason-react-native"
2630
},
2731
// When used from git with the following path, bs-platform will use path that won't be working
@@ -37,10 +41,11 @@ If you use this bindings from the git repo, be sure to use
3741
}
3842
```
3943

40-
Did you notice that this way, you can use both bindings to slowly migrate?
44+
Did you notice `bs-react-native-jsx3-compat` ? See migration instructions so you
45+
can slowly migrate to new `reason-react-native` bindings.
4146

42-
_Next ReactNative zero-cost bindings are still WIP, so use carefully at your own
43-
risk._
47+
_Next `reason-react-native` (`open ReactNative;`) - zero-cost bindings - are
48+
still WIP, so use carefully at your own risk._
4449

4550
## ⚠️ ReactNative zero-cost bindings setup with Reason React hooks
4651

‎bs-react-native-example/bsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,5 @@
1515
"subdirs": true
1616
}
1717
],
18-
"bs-dependencies": ["reason-react", "../../bs-react-native"]
18+
"bs-dependencies": ["reason-react", "bs-react-native"]
1919
}

‎bs-react-native-jsx3-compat/bsconfig.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
22
"name": "bs-react-native-jsx3-compat",
3-
"namespace": "bs-react-native-jsx3-compat",
3+
"namespace": "bs-react-native",
44
"refmt": 3,
55
"reason": {
6-
"react-jsx": 2
6+
"react-jsx": 3
77
},
88
"package-specs": {
99
"module": "commonjs",
@@ -16,6 +16,6 @@
1616
"subdirs": true
1717
}
1818
],
19-
"bsc-flags": ["-bs-no-version-header", "-warn-error @a", "-w -41-42-102"],
20-
"bs-dependencies": ["reason-react"]
19+
"bsc-flags": ["-bs-no-version-header", "-warn-error @a", "-w -41-42-102-103"],
20+
"bs-dependencies": ["reason-react", "reason-react-native"]
2121
}

‎bs-react-native-jsx3-compat/src/RNEvent.re‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
type t;
22

33
module NativeEvent = {
4-
type t;
4+
type t = ReactNative.Event.pressEvent;
55
[@bs.get] external changedTouches: t => array(Js.t({..})) = "";
66
[@bs.get] external identifier: t => int = "";
77
[@bs.get] external locationX: t => float = "";
@@ -21,7 +21,7 @@ module NativeEvent = {
2121
module NativePressEvent = NativeEvent;
2222

2323
module NativeLayoutEvent = {
24-
type t;
24+
type t = ReactNative.Event.layoutEvent;
2525
type layout = {
2626
x: float,
2727
y: float,
@@ -36,7 +36,7 @@ module NativeLayoutEvent = {
3636
};
3737

3838
module NativeScrollEvent = {
39-
type t;
39+
type t = ReactNative.Event.scrollEvent;
4040
type point = {
4141
x: float,
4242
y: float,

‎bs-react-native-jsx3-compat/src/RNEvent.rei‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
type t;
22

33
module NativeEvent: {
4-
type t;
4+
type t = ReactNative.Event.pressEvent;
55
let changedTouches: t => array(Js.t({..}));
66
let identifier: t => int;
77
let locationX: t => float;
@@ -17,7 +17,7 @@ module NativeEvent: {
1717
module NativePressEvent = NativeEvent;
1818

1919
module NativeScrollEvent: {
20-
type t;
20+
type t = ReactNative.Event.scrollEvent;
2121
type point = {
2222
x: float,
2323
y: float,
@@ -39,7 +39,7 @@ module NativeScrollEvent: {
3939
};
4040

4141
module NativeLayoutEvent: {
42-
type t;
42+
type t = ReactNative.Event.layoutEvent;
4343
type layout = {
4444
x: float,
4545
y: float,

‎bs-react-native-jsx3-compat/src/actionSheetIOS.rei‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ type options =
6767
]}
6868
{4 tintColor}
6969
{[
70-
~tintColor: string=?
70+
~tintColor: ReactNative.Color.t=?
7171
]}
7272
{4 callback}
7373
{[
@@ -129,7 +129,7 @@ let showActionSheetWithOptions:
129129
~destructiveButtonIndex: int=?,
130130
~title: string=?,
131131
~message: string=?,
132-
~tintColor: string=?,
132+
~tintColor: ReactNative.Color.t=?,
133133
int => unit,
134134
unit
135135
) =>

‎bs-react-native-jsx3-compat/src/animated.re‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
include AnimatedRe;
2-
32
module Text = AnimatedComponents.Text;
4-
53
module Image = AnimatedComponents.Image;
6-
7-
module View = AnimatedComponents.View;
8-
4+
module View = AnimatedView;
95
module ScrollView = AnimatedComponents.ScrollView;
106

11-
module FlatList = AnimatedComponents.FlatList;
7+
type t;

‎bs-react-native-jsx3-compat/src/components/AnimatedImage.re‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
include Image;
2+
3+
[@react.component]
4+
let make =
5+
(
6+
~onError=?,
7+
~onLayout=?,
8+
~onLoad=?,
9+
~onLoadEnd=?,
10+
~onLoadStart=?,
11+
~resizeMode=?,
12+
~source,
13+
~style=?,
14+
~testID=?,
15+
~resizeMethod=?,
16+
~accessibilityLabel=?,
17+
~accessible=?,
18+
~blurRadius=?,
19+
~capInsets=?,
20+
~defaultSource=?,
21+
~onPartialLoad=?,
22+
~onProgress=?,
23+
_,
24+
) =>
25+
<ReactNative.Animated.Image
26+
?onError
27+
?onLayout
28+
?onLoad
29+
?onLoadEnd
30+
?onLoadStart
31+
?resizeMode
32+
source={encodeSource(source)}
33+
?style
34+
?testID
35+
?resizeMethod
36+
?accessibilityLabel
37+
?accessible
38+
?blurRadius
39+
capInsets=?{Types.toEdgeInsets(capInsets)}
40+
defaultSource=?{defaultSource->Belt.Option.map(encodeDefaultSource)}
41+
?onPartialLoad
42+
onProgress=?{
43+
onProgress->Belt.Option.map((cb, e) => cb(Event.progress(e)))
44+
}
45+
/>;

‎bs-react-native-jsx3-compat/src/components/AnimatedScrollView.re‎

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
[@react.component]
2+
let make =
3+
(
4+
~accessibilityLabel=?,
5+
~accessible=?,
6+
~hitSlop=?,
7+
~onAccessibilityTap=?,
8+
~onLayout=?,
9+
~onMagicTap=?,
10+
~responderHandlers=?,
11+
~pointerEvents=?,
12+
~removeClippedSubviews=?,
13+
~style=?,
14+
~testID=?,
15+
~accessibilityComponentType=?,
16+
~accessibilityLiveRegion=?,
17+
~collapsable=?,
18+
~importantForAccessibility=?,
19+
~needsOffscreenAlphaCompositing=?,
20+
~renderToHardwareTextureAndroid=?,
21+
~accessibilityTraits=?,
22+
~accessibilityRole=?,
23+
~accessibilityStates=?,
24+
~accessibilityHint=?,
25+
~accessibilityIgnoresInvertColors=?,
26+
~accessibilityViewIsModal=?,
27+
~shouldRasterizeIOS=?,
28+
~contentInsetAdjustmentBehavior=?,
29+
~contentContainerStyle=?,
30+
~horizontal=?,
31+
~keyboardDismissMode=?,
32+
~keyboardShouldPersistTaps=?,
33+
~onContentSizeChange=?,
34+
~onScroll=?,
35+
~onScrollBeginDrag=?,
36+
~onScrollEndDrag=?,
37+
~onMomentumScrollBegin=?,
38+
~onMomentumScrollEnd=?,
39+
~pagingEnabled=?,
40+
~refreshControl=?,
41+
~scrollEnabled=?,
42+
~showsHorizontalScrollIndicator=?,
43+
~showsVerticalScrollIndicator=?,
44+
~stickyHeaderIndices=?,
45+
~overScrollMode=?,
46+
~scrollPerfTag=?,
47+
~alwaysBounceHorizontal=?,
48+
~alwaysBounceVertical=?,
49+
~automaticallyAdjustContentInsets=?,
50+
~bounces=?,
51+
~canCancelContentTouches=?,
52+
~centerContent=?,
53+
~contentInset=?,
54+
~contentOffset=?,
55+
~decelerationRate=?,
56+
~directionalLockEnabled=?,
57+
~indicatorStyle=?,
58+
~maximumZoomScale=?,
59+
~minimumZoomScale=?,
60+
~scrollEventThrottle=?,
61+
~scrollIndicatorInsets=?,
62+
~scrollsToTop=?,
63+
~snapToInterval=?,
64+
~snapToAlignment=?,
65+
~zoomScale=?,
66+
~children=?,
67+
_,
68+
) =>
69+
<ReactNative.Animated.ScrollView
70+
?contentInsetAdjustmentBehavior
71+
?contentContainerStyle
72+
?horizontal
73+
?keyboardDismissMode
74+
?keyboardShouldPersistTaps
75+
?onContentSizeChange
76+
?onScroll
77+
?onScrollBeginDrag
78+
?onScrollEndDrag
79+
?onMomentumScrollBegin
80+
?onMomentumScrollEnd
81+
?pagingEnabled
82+
?refreshControl
83+
?scrollEnabled
84+
?showsHorizontalScrollIndicator
85+
?showsVerticalScrollIndicator
86+
stickyHeaderIndices=?{stickyHeaderIndices->Belt.Option.map(Array.of_list)}
87+
?overScrollMode
88+
?scrollPerfTag
89+
?alwaysBounceHorizontal
90+
?alwaysBounceVertical
91+
?automaticallyAdjustContentInsets
92+
?bounces
93+
?canCancelContentTouches
94+
?centerContent
95+
?contentInset
96+
?contentOffset
97+
?decelerationRate
98+
?directionalLockEnabled
99+
?indicatorStyle
100+
?maximumZoomScale
101+
?minimumZoomScale
102+
?scrollEventThrottle
103+
scrollIndicatorInsets=?{Types.toEdgeInsets(scrollIndicatorInsets)}
104+
?scrollsToTop
105+
?snapToInterval
106+
?snapToAlignment
107+
?zoomScale
108+
?accessibilityLabel
109+
?accessible
110+
hitSlop=?{Types.toEdgeInsets(hitSlop)}
111+
?onAccessibilityTap
112+
?onLayout
113+
?onMagicTap
114+
onMoveShouldSetResponder=?
115+
Types.(
116+
responderHandlers->Belt.Option.flatMap(handlers =>
117+
handlers.onMoveShouldSetResponder->Belt.Option.map((g, x) => g(x))
118+
)
119+
)
120+
onMoveShouldSetResponderCapture=?
121+
Types.(
122+
responderHandlers->Belt.Option.flatMap(handlers =>
123+
handlers.onMoveShouldSetResponderCapture
124+
->Belt.Option.map((g, x) => g(x))
125+
)
126+
)
127+
onResponderGrant=?
128+
Types.(
129+
responderHandlers->Belt.Option.flatMap(handlers =>
130+
handlers.onResponderGrant
131+
)
132+
)
133+
onResponderMove=?
134+
Types.(
135+
responderHandlers->Belt.Option.flatMap(handlers =>
136+
handlers.onResponderMove
137+
)
138+
)
139+
onResponderReject=?
140+
Types.(
141+
responderHandlers->Belt.Option.flatMap(handlers =>
142+
handlers.onResponderReject
143+
)
144+
)
145+
onResponderRelease=?
146+
Types.(
147+
responderHandlers->Belt.Option.flatMap(handlers =>
148+
handlers.onResponderRelease
149+
)
150+
)
151+
onResponderTerminate=?
152+
Types.(
153+
responderHandlers->Belt.Option.flatMap(handlers =>
154+
handlers.onResponderTerminate
155+
)
156+
)
157+
onResponderTerminationRequest=?
158+
Types.(
159+
responderHandlers->Belt.Option.flatMap(handlers =>
160+
handlers.onResponderTerminationRequest
161+
)
162+
)
163+
onStartShouldSetResponder=?
164+
Types.(
165+
responderHandlers->Belt.Option.flatMap(handlers =>
166+
handlers.onStartShouldSetResponder->Belt.Option.map((g, x) => g(x))
167+
)
168+
)
169+
onStartShouldSetResponderCapture=?
170+
Types.(
171+
responderHandlers->Belt.Option.flatMap(handlers =>
172+
handlers.onStartShouldSetResponderCapture
173+
->Belt.Option.map((g, x) => g(x))
174+
)
175+
)
176+
?pointerEvents
177+
?removeClippedSubviews
178+
?style
179+
?testID
180+
?accessibilityComponentType
181+
?accessibilityLiveRegion
182+
?collapsable
183+
?importantForAccessibility
184+
?needsOffscreenAlphaCompositing
185+
?renderToHardwareTextureAndroid
186+
accessibilityTraits=?{
187+
accessibilityTraits->Belt.Option.map(Belt.List.toArray)
188+
}
189+
?accessibilityRole
190+
accessibilityStates=?{
191+
accessibilityStates->Belt.Option.map(Belt.List.toArray)
192+
}
193+
?accessibilityHint
194+
?accessibilityIgnoresInvertColors
195+
?accessibilityViewIsModal
196+
?shouldRasterizeIOS>
197+
{children->Belt.Option.getWithDefault(React.null)}
198+
</ReactNative.Animated.ScrollView>;

0 commit comments

Comments
 (0)