feat: add childrenStyle prop

jeremybarbet · Apr 22, 2020 · 1519e9c · 1519e9c
1 parent 7153c68
commit 1519e9c
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 3 deletions.
diff --git a/docs/PROPS.md b/docs/PROPS.md
@@ -68,7 +68,7 @@ Multiple objects way to style the different part of Modalize.
 
 ### `modalStyle`
 
-Define the style of the modal.
+Define the style of the modal (includes handle/header/children/footer).
 
 | Type     | Required |
 | -------- | -------- |
@@ -92,6 +92,14 @@ Define the style of the overlay.
 | -------- | -------- |
 | style    | No       |
 
+### `childrenStyle`
+
+Define the style of the children renderer (only the inside part).
+
+| Type     | Required |
+| -------- | -------- |
+| style    | No       |
+
 ### `modalElevation`
 
 A number to define the elevation of the modal on Android. Useful if you have other elements of your app using other values of elevation.

diff --git a/examples/expo/src/components/modals/SectionList.js b/examples/expo/src/components/modals/SectionList.js
@@ -55,6 +55,7 @@ export const SectionList = forwardRef((_, ref) => {
   return (
     <Modalize
       ref={combinedRef}
+      childrenStyle={{ borderTopLeftRadius: 12, borderTopRightRadius: 12, overflow: 'hidden' }}
       sectionListProps={{
         sections: getSections(),
         renderItem: renderItem,

diff --git a/examples/react-native-navigation/src/screens/SectionList.js b/examples/react-native-navigation/src/screens/SectionList.js
@@ -68,6 +68,7 @@ export const SectionList = ({ componentId }) => {
     <Modalize
       ref={modalRef}
       onClosed={onClosed}
+      childrenStyle={{ borderTopLeftRadius: 12, borderTopRightRadius: 12, overflow: 'hidden' }}
       sectionListProps={{
         sections: getSections(),
         renderItem: renderItem,

diff --git a/examples/react-navigation/src/components/modals/SectionList.js b/examples/react-navigation/src/components/modals/SectionList.js
@@ -55,6 +55,7 @@ export const SectionList = forwardRef((_, ref) => {
   return (
     <Modalize
       ref={combinedRef}
+      childrenStyle={{ borderTopLeftRadius: 12, borderTopRightRadius: 12, overflow: 'hidden' }}
       sectionListProps={{
         sections: getSections(),
         renderItem: renderItem,

diff --git a/src/index.tsx b/src/index.tsx
@@ -64,6 +64,7 @@ const ModalizeBase = (
     modalStyle,
     handleStyle,
     overlayStyle,
+    childrenStyle,
     modalElevation,
 
     // Layout
@@ -685,7 +686,7 @@ const ModalizeBase = (
         activeOffsetX={ACTIVATED}
         onHandlerStateChange={onHandleChildren}
       >
-        <Animated.View style={style}>
+        <Animated.View style={[style, childrenStyle]}>
           <NativeViewGestureHandler
             ref={modalContentView}
             waitFor={modal}

diff --git a/src/options.ts b/src/options.ts
@@ -63,7 +63,7 @@ export interface IProps<ListItem = any> {
   sectionListProps?: Animated.AnimatedProps<SectionListProps<ListItem>>;
 
   /**
-   * Define the style of the modal.
+   * Define the style of the modal (includes handle/header/children/footer).
    */
   modalStyle?: TStyle;
 
@@ -77,6 +77,11 @@ export interface IProps<ListItem = any> {
    */
   overlayStyle?: TStyle;
 
+  /**
+   * Define the style of the children renderer (only the inside part).
+   */
+  childrenStyle?: TStyle;
+
   /**
    * A number to define the elevation of the modal on Android. Useful if you have other elements of your app using other values of elevation (Android specific).
    */