pass down props for button components

roninoss · Jun 17, 2024 · 0aee640 · 0aee640
1 parent 5eefd28
commit 0aee640
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 17 deletions.
diff --git a/.changeset/happy-rings-judge.md b/.changeset/happy-rings-judge.md
@@ -0,0 +1,5 @@
+---
+'create-expo-stack': patch
+---
+
+Pass down props for button components
diff --git a/cli/src/templates/base/components/Button.tsx.ejs b/cli/src/templates/base/components/Button.tsx.ejs
@@ -2,13 +2,12 @@ import { forwardRef } from 'react';
 import { StyleSheet, Text, TouchableOpacity, TouchableOpacityProps } from 'react-native';
 
 type ButtonProps = {
-  onPress?: TouchableOpacityProps['onPress'];
   title?: string;
 } & TouchableOpacityProps;
 
-export const Button = forwardRef<TouchableOpacity, ButtonProps>(({ onPress, title }, ref) => {
+export const Button = forwardRef<TouchableOpacity, ButtonProps>(({ title, ...touchableProps }, ref) => {
   return (
-    <TouchableOpacity ref={ref} style={styles.button} onPress={onPress}>
+    <TouchableOpacity ref={ref} {...touchableProps} style={[styles.button, touchableProps.style]}>
       <Text style={styles.buttonText}>{title}</Text>
     </TouchableOpacity>
   );

diff --git a/cli/src/templates/packages/nativewind/components/Button.tsx.ejs b/cli/src/templates/packages/nativewind/components/Button.tsx.ejs
@@ -1,14 +1,13 @@
 import { forwardRef } from 'react';
 import { Text, TouchableOpacity, TouchableOpacityProps } from 'react-native';
 
-interface ButtonProps extends TouchableOpacityProps {
-  onPress?: () => void;
+type ButtonProps = {
   title: string;
-}
+} & TouchableOpacityProps;
 
-export const Button = forwardRef<TouchableOpacity, ButtonProps>(({ onPress, title }, ref) => {
+export const Button = forwardRef<TouchableOpacity, ButtonProps>(({ title, ...touchableProps }, ref) => {
   return (
-    <TouchableOpacity ref={ref} className={styles.button} onPress={onPress}>
+    <TouchableOpacity ref={ref} {...touchableProps} className={`${styles.button} ${touchableProps.className}`}>
       <Text className={styles.buttonText}>{title}</Text>
     </TouchableOpacity>
   );

diff --git a/cli/src/templates/packages/nativewindui/components/Button.tsx.ejs b/cli/src/templates/packages/nativewindui/components/Button.tsx.ejs
@@ -2,13 +2,12 @@ import { forwardRef } from 'react';
 import { StyleSheet, Text, TouchableOpacity, TouchableOpacityProps } from 'react-native';
 
 type ButtonProps = {
-  onPress?: TouchableOpacityProps['onPress'];
   title?: string;
 } & TouchableOpacityProps;
 
-export const Button = forwardRef<TouchableOpacity, ButtonProps>(({ onPress, title }, ref) => {
+export const Button = forwardRef<TouchableOpacity, ButtonProps>(({ title, ...touchableProps }, ref) => {
   return (
-    <TouchableOpacity ref={ref} style={styles.button} onPress={onPress}>
+    <TouchableOpacity ref={ref} {...touchableProps} style={[styles.button, touchableProps.style]}>
       <Text style={styles.buttonText}>{title}</Text>
     </TouchableOpacity>
   );

diff --git a/cli/src/templates/packages/restyle/components/Button.tsx.ejs b/cli/src/templates/packages/restyle/components/Button.tsx.ejs
@@ -1,12 +1,16 @@
 import { forwardRef } from 'react';
-import { TouchableOpacity } from 'react-native';
+import { TouchableOpacity, TouchableOpacityProps } from 'react-native';
 import { Text, makeStyles } from 'theme';
 
-export const Button = forwardRef<TouchableOpacity, ButtonProps>(({ onPress, title }, ref) => {
+type ButtonProps = {
+  title?: string;
+} & TouchableOpacityProps;
+
+export const Button = forwardRef<TouchableOpacity, ButtonProps>(({ title, ...touchableProps }, ref) => {
   const styles = useStyles();
 
   return (
-    <TouchableOpacity style={styles.button} onPress={onPress}>
+    <TouchableOpacity ref={ref} {...touchableProps} style={[styles.button, touchableProps.style]}>
       <Text variant="body" textAlign="center" color="white" fontWeight="600">
         {title}
       </Text>

diff --git a/cli/src/templates/packages/unistyles/components/Button.tsx.ejs b/cli/src/templates/packages/unistyles/components/Button.tsx.ejs
@@ -1,12 +1,17 @@
 import { forwardRef } from 'react';
-import { Text, TouchableOpacity } from 'react-native';
+import { Text, TouchableOpacity, TouchableOpacityProps } from 'react-native';
 import { useStyles } from 'react-native-unistyles';
 
-export const Button = forwardRef<TouchableOpacity, ButtonProps>(({ onPress, title }, ref) => {
+type ButtonProps = {
+  title?: string;
+} & TouchableOpacityProps;
+
+
+export const Button = forwardRef<TouchableOpacity, ButtonProps>(({ title, ...touchableProps }, ref) => {
   const { theme } = useStyles();
 
   return (
-    <TouchableOpacity style={theme.components.button} onPress={onPress}>
+    <TouchableOpacity ref={ref} {...touchableProps} style={[theme.components.button, touchableProps.style]}>
       <Text style={theme.components.buttonText}>{title}</Text>
     </TouchableOpacity>
   );