Merge pull request #1682 from gluestack/release/@gluestack-ui/themed@…

…1.0.39

Release/@gluestack UI/[email protected]

example/storybook/.storybook/preview.js

@@ -89,13 +89,15 @@ export const parameters = {
         [
           'FlatList',
           'ScrollView',
+          'SafeAreaView',
           'VirtualizedList',
           'View',
           'KeyboardAvoidingView',
           'SectionList',
           'StatusBar',
           'Refresh Control',
           'ImageBackground',
+          'InputAccessoryView',
         ],
         'Hooks',
         [

example/storybook/src/ui/react-native-components/InputAcessoryView/InputAccessoryView.stories.tsx

@@ -0,0 +1,11 @@
+import type { ComponentMeta } from '@storybook/react-native';
+import InputAccessoryViewStory from './InputAccessoryView';
+
+const InputAccessoryViewMeta: ComponentMeta<typeof ScrollView> = {
+  title: 'stories/React Native Components/InputAccessoryView',
+  component: InputAccessoryViewStory,
+};
+
+export default InputAccessoryViewMeta;
+
+export { InputAccessoryView };

example/storybook/src/ui/react-native-components/InputAcessoryView/InputAccessoryView.tsx

@@ -0,0 +1,46 @@
+import {
+  ScrollView,
+  Button,
+  ButtonText,
+  Center,
+  Input,
+  InputAccessoryView,
+} from '@gluestack-ui/themed';
+import { config } from '@gluestack-ui/config';
+import React from 'react';
+import Wrapper from '../../components/Wrapper';
+
+export default function SafeAreaViewStory() {
+  return (
+    <Center>
+      <ScrollView keyboardDismissMode="interactive">
+        <Input
+          style={{
+            padding: 16,
+            marginTop: 50,
+          }}
+          inputAccessoryViewID={inputAccessoryViewID}
+          onChangeText={setText}
+          value={text}
+          placeholder={'Please type here…'}
+        />
+      </ScrollView>
+      <InputAccessoryView nativeID={inputAccessoryViewID}>
+        <Button onPress={() => setText(initialText)}>
+          <ButtonText>Clear text </ButtonText>
+        </Button>
+      </InputAccessoryView>
+    </Center>
+  );
+}
+
+export {
+  VStack,
+  Center,
+  Heading,
+  GluestackUIProvider,
+  SafeAreaView,
+  Text,
+} from '@gluestack-ui/themed';
+
+export { config, Wrapper };

example/storybook/src/ui/react-native-components/InputAcessoryView/index.stories.mdx

@@ -0,0 +1,48 @@
+---
+title: InputAccessoryView | gluestack-ui
+
+description: A component which enables customization of the keyboard input accessory view on iOS. The input accessory view is displayed above the keyboard whenever a TextInput has focus. This component can be used to create custom toolbars.
+---
+
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="ui/React Native Components/InputAccessoryView" />
+
+# InputAccessoryView
+
+Following is the default implementation of the **InputAccessoryView** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component.
+
+> Note: InputAccessoryView component is only applicable to iOS devices with iOS version 11 or later.
+
+<iframe
+  src="https://snack.expo.dev/embedded/@gluestack/inputaccessoryview-gluestack-ui?iframeId=ivy5yisd3p&preview=true&platform=ios&theme=dark"
+  style={{ width: '100%', height: '60vh', border: '0px' }}
+/>
+
+<br />
+
+> Note: You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/InputAccessoryView/styled-components) to learn about default styling of InputAccessoryView component
+
+### Import
+
+To use this component in your project, include the following import statement in your file.
+
+```bash
+import { InputAccessoryView } from '@gluestack-ui/themed';
+```
+
+### Anatomy
+
+The structure provided below can help you identify and understand a InputAccessoryView component's various parts.
+
+```jsx
+export default () => <InputAccessoryView />;
+```
+
+### API Reference
+
+The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
+
+### InputAccessoryView
+
+It inherits all the properties of React Native's [InputAccessoryView](https://reactnative.dev/docs/InputAccessoryView) component. 

example/storybook/src/ui/react-native-components/SafeAreaView/SafeAreaView.stories.tsx

@@ -0,0 +1,11 @@
+import type { ComponentMeta } from '@storybook/react-native';
+import SafeAreaViewStory from './SafeAreaView';
+
+const SafeAreaViewMeta: ComponentMeta<typeof ScrollView> = {
+  title: 'stories/React Native Components/SafeAreaView',
+  component: SafeAreaViewStory,
+};
+
+export default SafeAreaViewMeta;
+
+export { SafeAreaView };

example/storybook/src/ui/react-native-components/SafeAreaView/SafeAreaView.tsx

@@ -0,0 +1,25 @@
+import { SafeAreaView, Center, Text } from '@gluestack-ui/themed';
+import { config } from '@gluestack-ui/config';
+import React from 'react';
+import Wrapper from '../../components/Wrapper';
+
+export default function SafeAreaViewStory() {
+  return (
+    <Center>
+      <SafeAreaView flex={1}>
+        <Text fontSize="$md">Page content</Text>
+      </SafeAreaView>
+    </Center>
+  );
+}
+
+export {
+  VStack,
+  Center,
+  Heading,
+  GluestackUIProvider,
+  SafeAreaView,
+  Text,
+} from '@gluestack-ui/themed';
+
+export { config, Wrapper };

example/storybook/src/ui/react-native-components/SafeAreaView/index.stories.mdx

@@ -0,0 +1,48 @@
+---
+title: SafeAreaView | gluestack-ui
+
+description: Component to ensure that your content is displayed within the safe area of a device screen. The safe area refers to the portion of the screen that is visible and not obstructed by device-specific elements like notches, status bars, and rounded corners. This is particularly important on modern smartphones, where screens may have irregular shapes or include areas that are not fully usable for displaying content.
+---
+
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="ui/React Native Components/SafeAreaView" />
+
+# SafeAreaView
+
+Following is the default implementation of the **SafeAreaView** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component.
+
+> Note: SafeAreaView component is only applicable to iOS devices with iOS version 11 or later.
+
+<iframe
+  src="https://snack.expo.dev/embedded/@gluestack/safeareaview-example-gluestack-ui?iframeId=o8ckls5o1n&preview=true&platform=ios&theme=dark"
+  style={{ width: '100%', height: '60vh', border: '0px' }}
+/>
+
+<br />
+
+> Note: You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/SafeAreaView/styled-components) to learn about default styling of SafeAreaView component
+
+### Import
+
+To use this component in your project, include the following import statement in your file.
+
+```bash
+import { SafeAreaView } from '@gluestack-ui/themed';
+```
+
+### Anatomy
+
+The structure provided below can help you identify and understand a SafeAreaView component's various parts.
+
+```jsx
+export default () => <SafeAreaView />;
+```
+
+### API Reference
+
+The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
+
+### SafeAreaView
+
+It inherits all the properties of React Native's [SafeAreaView](https://reactnative.dev/docs/SafeAreaView) component. 

packages/config/src/theme/InputAccessoryView.ts

@@ -0,0 +1,3 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const InputAccessoryView = createStyle({});

packages/config/src/theme/SafeAreaView.ts

@@ -0,0 +1,3 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const SafeAreaView = createStyle({});

packages/config/src/theme/index.ts

@@ -147,3 +147,8 @@ export * from './TooltipContent';
 export * from './TooltipText';
 export * from './VStack';
 export * from './View';
+export * from './ImageBackground';
+export * from './InputAccessoryView';
+export * from './SafeAreaView';
+export * from './RefreshControl';
+export * from './VirtualizedList';

packages/themed/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @gluestack-ui/themed
 
+## 1.0.39
+
+### Patch Changes
+
+- - SaferAreaView
+  - InputAccessoryView
+
 ## 1.0.38
 
 ### Patch Changes

packages/themed/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gluestack-ui/themed",
-  "version": "1.0.38",
+  "version": "1.0.39",
   "main": "build/index.js",
   "types": "build/index.d.ts",
   "module": "build/index",

packages/themed/src/components/InputAccessoryView/config.json

@@ -0,0 +1 @@
+{ "dependencies": {}, "keywords": ["components", "core"] }

packages/themed/src/components/InputAccessoryView/index.tsx

@@ -0,0 +1,3 @@
+import { Root } from './styled-components';
+
+export const InputAccessoryView = Root;

packages/themed/src/components/InputAccessoryView/styled-components/Root.tsx

@@ -0,0 +1,6 @@
+import { InputAccessoryView } from 'react-native';
+import { styled } from '@gluestack-style/react';
+
+export default styled(InputAccessoryView, {}, {
+  componentName: 'InputAccessoryView',
+} as const);

packages/themed/src/components/InputAccessoryView/styled-components/index.tsx

@@ -0,0 +1 @@
+export { default as Root } from './Root';

packages/themed/src/components/SafeAreaView/config.json

@@ -0,0 +1 @@
+{ "dependencies": {}, "keywords": ["components", "core"] }

packages/themed/src/components/SafeAreaView/index.tsx

@@ -0,0 +1,3 @@
+import { Root } from './styled-components';
+
+export const SafeAreaView = Root;

packages/themed/src/components/SafeAreaView/styled-components/Root.tsx

@@ -0,0 +1,6 @@
+import { SafeAreaView } from 'react-native';
+import { styled } from '@gluestack-style/react';
+
+export default styled(SafeAreaView, {}, {
+  componentName: 'SafeAreaView',
+} as const);

packages/themed/src/components/SafeAreaView/styled-components/index.tsx

@@ -0,0 +1 @@
+export { default as Root } from './Root';