chore: bump 4.0.0-rc.8 (#3819)

react-native-elements · Jul 28, 2023 · 78e3994 · 78e3994
1 parent b5a95f6
commit 78e3994
Show file tree

Hide file tree

Showing 106 changed files with 9,484 additions and 5 deletions.
diff --git a/packages/base/package.json b/packages/base/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rneui/base",
-  "version": "4.0.0-rc.7",
+  "version": "4.0.0-rc.8",
   "description": "Cross Platform React Native UI Toolkit",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/packages/themed/package.json b/packages/themed/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rneui/themed",
-  "version": "4.0.0-rc.7",
+  "version": "4.0.0-rc.8",
   "description": "Cross Platform React Native UI Toolkit",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/website/versioned_docs/version-4.0.0-rc.8/component_usage/AirbnbRating.mdx b/website/versioned_docs/version-4.0.0-rc.8/component_usage/AirbnbRating.mdx
@@ -0,0 +1,81 @@
+```SnackPlayer name=RNE AirbnbRating
+import React from 'react';
+import { StyleSheet, Text, View, Platform, ScrollView } from 'react-native';
+import { AirbnbRating } from '@rneui/themed';
+
+type RatingsComponentProps = {};
+
+const Ratings: React.FunctionComponent<RatingsComponentProps> = () => {
+const ratingCompleted = (rating: number) => {
+  console.log('Rating is: ' + rating);
+};
+
+const ratingProps = {};
+return (
+  <View style={styles.container}>
+    <ScrollView style={styles.viewContainer}>
+      <View
+        style={{
+          justifyContent: 'center',
+          alignItems: 'center',
+          marginBottom: 30,
+        }}
+      >
+        <AirbnbRating />
+        <AirbnbRating isDisabled={true}/>
+        <AirbnbRating
+          count={11}
+          reviews={[
+            'Terrible',
+            'Bad',
+            'Meh',
+            'OK',
+            'Good',
+            'Hmm...',
+            'Very Good',
+            'Wow',
+            'Amazing',
+            'Unbelievable',
+            'Jesus',
+          ]}
+          defaultRating={11}
+          size={20}
+        />
+      </View>
+    </ScrollView>
+  </View>
+);
+};
+
+const styles = StyleSheet.create({
+container: {
+  flex: 1,
+},
+headingContainer: {
+  paddingTop: 50,
+},
+titleText: {
+  fontSize: 25,
+  fontWeight: 'bold',
+  textAlign: 'center',
+  paddingVertical: 5,
+  fontFamily: Platform.OS === 'ios' ? 'Menlo-Bold' : '',
+  color: '#27ae60',
+},
+subtitleText: {
+  fontSize: 18,
+  fontWeight: '400',
+  textAlign: 'center',
+  fontFamily: Platform.OS === 'ios' ? 'Trebuchet MS' : '',
+  color: '#34495e',
+},
+viewContainer: {
+  flex: 1,
+},
+rating: {
+  paddingVertical: 10,
+},
+});
+
+export default Ratings;
+```
diff --git a/website/versioned_docs/version-4.0.0-rc.8/component_usage/Avatar.mdx b/website/versioned_docs/version-4.0.0-rc.8/component_usage/Avatar.mdx
@@ -0,0 +1,210 @@
+```SnackPlayer name=RNE Avatar
+import React, { useState } from 'react';
+import { View, ScrollView, Text, StyleSheet } from 'react-native';
+import { Avatar } from '@rneui/themed';
+
+type AvatarData = {
+image_url: string;
+};
+
+const dataList: AvatarData[] = [
+{
+  image_url: 'https://uifaces.co/our-content/donated/6MWH9Xi_.jpg',
+},
+{
+  image_url: 'https://randomuser.me/api/portraits/men/36.jpg',
+},
+{
+  image_url:
+    'https://cdn.pixabay.com/photo/2019/11/03/20/11/portrait-4599553__340.jpg',
+},
+{
+  image_url:
+    'https://cdn.pixabay.com/photo/2014/09/17/20/03/profile-449912__340.jpg',
+},
+{
+  image_url:
+    'https://cdn.pixabay.com/photo/2020/09/18/05/58/lights-5580916__340.jpg',
+},
+{
+  image_url:
+    'https://cdn.pixabay.com/photo/2016/11/21/12/42/beard-1845166_1280.jpg',
+},
+];
+
+type AvatarComponentProps = {};
+
+Array.prototype.chunk = function ( n ) {
+  if ( !this.length ) {
+      return [];
+  }
+  return [ this.slice( 0, n ) ].concat( this.slice(n).chunk(n) );
+};
+
+const Avatars: React.FunctionComponent<AvatarComponentProps> = () => {
+return (
+  <>
+    <ScrollView>
+      <Text style={styles.subHeader}>Image Avatars</Text>
+      {dataList.chunk(3).map((chunk, chunkIndex) => (
+        <View
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'space-around',
+            marginBottom: 30,
+          }}
+          key={chunkIndex}
+        >
+          {chunk.map((l, i) => (
+            <Avatar
+              size={64}
+              rounded
+              source={l.image_url ? { uri: l.image_url } : {}}
+              key={`${chunkIndex}-${i}`}
+            />
+          ))}
+        </View>
+      ))}
+      <Text style={styles.subHeader}>Icon Avatars</Text>
+      <View
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'space-around',
+          marginBottom: 30,
+        }}
+      >
+        <Avatar
+          size={64}
+          rounded
+          icon={{ name: 'pencil', type: 'font-awesome' }}
+          containerStyle={{ backgroundColor: '#6733b9' }}
+        />
+        <Avatar
+          size={64}
+          rounded
+          icon={{ name: 'rowing' }}
+          containerStyle={{ backgroundColor: '#00a7f7' }}
+        />
+        <Avatar
+          size={64}
+          rounded
+          icon={{ name: 'heartbeat', type: 'font-awesome' }}
+          containerStyle={{ backgroundColor: '#eb1561' }}
+        />
+      </View>
+      <View
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'space-around',
+          marginBottom: 30,
+        }}
+      >
+        <Avatar
+          size={64}
+          rounded
+          icon={{
+            name: 'extension',
+            type: 'material',
+            color: '#cdde20',
+          }}
+          containerStyle={{
+            borderColor: 'grey',
+            borderStyle: 'solid',
+            borderWidth: 1,
+          }}
+        />
+        <Avatar
+          size={64}
+          rounded
+          icon={{ name: 'apartment', type: 'material', color: '#009688' }}
+          containerStyle={{
+            borderColor: 'grey',
+            borderStyle: 'solid',
+            borderWidth: 1,
+          }}
+        />
+        <Avatar
+          size={64}
+          rounded
+          icon={{ name: 'backup', type: 'material', color: '#ff5606' }}
+          containerStyle={{
+            borderColor: 'grey',
+            borderStyle: 'solid',
+            borderWidth: 1,
+          }}
+        />
+      </View>
+
+      <Text style={styles.subHeader}>Letter Avatars</Text>
+
+      <View
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'space-around',
+          marginBottom: 30,
+        }}
+      >
+        <Avatar
+          size={64}
+          rounded
+          title="Fc"
+          containerStyle={{ backgroundColor: '#3d4db7' }}
+        />
+        <Avatar
+          size={64}
+          rounded
+          title="P"
+          containerStyle={{ backgroundColor: 'coral' }}
+        />
+        <Avatar
+          size={64}
+          rounded
+          title="Rd"
+          containerStyle={{ backgroundColor: 'purple' }}
+        />
+      </View>
+
+      <Text style={styles.subHeader}>Badged Avatars</Text>
+
+      <View
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'space-around',
+          marginBottom: 40,
+        }}
+      >
+        <Avatar
+          size={64}
+          rounded
+          icon={{ name: 'adb', type: 'material' }}
+          containerStyle={{ backgroundColor: 'orange' }}
+        >
+          <Avatar.Accessory size={24} />
+        </Avatar>
+        <Avatar
+          size={64}
+          rounded
+          source={{ uri: 'https://randomuser.me/api/portraits/women/57.jpg' }}
+          title="Bj"
+          containerStyle={{ backgroundColor: 'grey' }}
+        >
+          <Avatar.Accessory size={23} />
+        </Avatar>
+      </View>
+    </ScrollView>
+  </>
+);
+};
+
+const styles = StyleSheet.create({
+subHeader: {
+  backgroundColor : "#2089dc",
+  color : "white",
+  textAlign : "center",
+  paddingVertical : 5,
+  marginBottom : 10
+}
+})
+
+export default Avatars;
+```