react-native-layer docs

npm install @whoisrijan/react-native-layer react-native-gesture-handler react-native-reanimated react-native-worklets react-native-safe-area-context react-native-svg

yarn add @whoisrijan/react-native-layer react-native-gesture-handler react-native-reanimated react-native-worklets react-native-safe-area-context react-native-svg

cd ios && pod install

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: ['react-native-worklets/plugin'],
};

import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { ToastProvider } from '@whoisrijan/react-native-layer';

export default function Root() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <SafeAreaProvider>
<ToastProvider>
  <App />
</ToastProvider>
      </SafeAreaProvider>
    </GestureHandlerRootView>
  );
}

import { useState } from 'react';
import { Text, Pressable, View } from 'react-native';
import { BottomSheet } from '@whoisrijan/react-native-layer';

export default function App() {
  const [visible, setVisible] = useState(false);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Pressable onPress={() => setVisible(true)}>
<Text>Open Sheet</Text>
      </Pressable>

      <BottomSheet visible={visible} onClose={() => setVisible(false)}>
<Text>Hello from the bottom sheet!</Text>
      </BottomSheet>
    </View>
  );
}

<BottomSheet visible={visible} onClose={() => setVisible(false)}>
  <Text>Sheet content</Text>
</BottomSheet>

<BottomSheet
  visible={visible}
  onClose={() => setVisible(false)}
  onOpen={() => console.log('Opened')}
  onDrag={(direction, fraction) =>
    console.log(`Dragging ${direction} · ${Math.round(fraction * 100)}%`)
  }
  onDragEnd={(settled) => console.log('Settled:', settled)}
  onFullScreen={() => console.log('Full screen!')}
>
  <Text>Drag me up or down</Text>
</BottomSheet>

<BottomSheet
  visible={visible}
  onClose={() => setVisible(false)}
  backgroundColor="#1E1B4B"
  handleColor="#A78BFA"
  backdropOpacity={0.7}
  contentContainerStyle={{ paddingHorizontal: 20 }}
>
  <Text style={{ color: '#E0E7FF' }}>Dark themed sheet</Text>
</BottomSheet>

<ConfirmModal
  visible={visible}
  title="Delete Item"
  message="Are you sure? This cannot be undone."
  positiveText="Delete"
  positiveButtonColor="#DC2626"
  negativeText="Cancel"
  onCancel={() => setVisible(false)}
  onConfirm={() => {
    console.log('Deleted!');
    setVisible(false);
  }}
/>

<ConfirmModal
  visible={visible}
  title="Delete Account"
  showInput
  inputLabel='Type "DELETE" to confirm'
  inputPlaceholder="DELETE"
  validationText="DELETE"
  positiveText="Delete"
  positiveButtonColor="#DC2626"
  negativeText="Cancel"
  onCancel={() => setVisible(false)}
  onConfirm={(value) => {
    console.log('Confirmed with:', value);
    setVisible(false);
  }}
/>

<Alert
  visible={visible}
  title="Update Available"
  message="A new version is available. Please update."
  onClose={() => setVisible(false)}
/>

<Alert
  visible={visible}
  title="Payment Successful"
  message="Your transaction has been completed."
  type="success"
  onClose={() => setVisible(false)}
/>

<Alert
  visible={visible}
  title="Connection Lost"
  message="You are offline. Check your internet connection."
  buttonText="Dismiss"
  position="bottom"
  type="error"
  backgroundColor="#FEF2F2"
  titleColor="#991B1B"
  messageColor="#B91C1C"
  buttonColor="#DC2626"
  buttonTextColor="#fff"
  onClose={() => setVisible(false)}
/>

import { SafeAreaProvider } from 'react-native-safe-area-context';
import { ToastProvider } from '@whoisrijan/react-native-layer';

function Root() {
  return (
    <SafeAreaProvider>
      <ToastProvider>
<App />
      </ToastProvider>
    </SafeAreaProvider>
  );
}

import { useToast } from '@whoisrijan/react-native-layer';

function MyScreen() {
  const { showToast } = useToast();

  return (
    <Pressable
      onPress={() =>
showToast({ message: 'Item saved!', position: 'bottom', duration: 3000 })
      }
    >
      <Text>Save</Text>
    </Pressable>
  );
}

showToast({
  message: 'Success!',
  position: 'bottom',
  backgroundColor: '#16A34A',
  textColor: '#fff',
  duration: 2000,
});

showToast({ message: 'Top!', position: 'top' });
showToast({ message: 'Center!', position: 'center' });
showToast({ message: 'Bottom!', position: 'bottom' }); // default

import { Layer } from '@whoisrijan/react-native-layer';

<Layer visible={visible} onClose={() => setVisible(false)}>
  <View style={{ flex: 1, backgroundColor: '#fff' }}>
    <Text>Build anything here</Text>
  </View>
</Layer>;

import { useInsets } from '@whoisrijan/react-native-layer';

function MyComponent() {
  const insets = useInsets();
  // insets.top, insets.bottom, insets.left, insets.right
}

const { showToast } = useToast();
showToast({ message: 'Hello!' });

import { useKeyboard } from '@whoisrijan/react-native-layer';

function MyComponent() {
  const { isOpen, close } = useKeyboard();
  const handlePress = () => {
    if (isOpen) close();
  };
}

import { isKeyboardOpen, closeKeyboard } from '@whoisrijan/react-native-layer';

if (isKeyboardOpen()) {
  closeKeyboard();
}

import type {
  BottomSheetProps,
  ConfirmModalProps,
  AlertProps,
  AlertPosition,     // 'center' | 'bottom'
  AlertType,         // 'success' | 'error' | 'warning' | 'question'
  ToastConfig,
  ToastContextValue,
  ToastPosition,     // 'top' | 'center' | 'bottom'
  LayerProps,
  DragDirection,     // 'up' | 'down'
  Insets,            // { top, bottom, left, right }
} from '@whoisrijan/react-native-layer';

// Quick theming with color props
<BottomSheet
  visible={visible}
  onClose={close}
  backgroundColor="#1E1B4B"
  handleColor="#A78BFA"
  backdropOpacity={0.7}
>
  {content}
</BottomSheet>

// Full control with style overrides
<ConfirmModal
  visible={visible}
  title="Custom"
  onConfirm={confirm}
  onCancel={cancel}
  cardStyle={{ borderRadius: 24, padding: 32 }}
  titleStyle={{ fontSize: 22, fontWeight: '800' }}
  positiveButtonStyle={{ borderRadius: 20 }}
/>