@testing-library/react-native 12.2.1 → 12.3.0

package/experiments-app/.expo/README.md

@@ -1,15 +0,0 @@
-> Why do I have a folder named ".expo" in my project?
-
-The ".expo" folder is created when an Expo project is started using "expo start" command.
-
-> What do the files contain?
-
-- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
-- "packager-info.json": contains port numbers and process PIDs that are used to serve the application to the mobile device/simulator.
-- "settings.json": contains the server configuration that is used to serve the application manifest.
-
-> Should I commit the ".expo" folder?
-
-No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
-
-Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

package/experiments-app/.expo/devices.json

@@ -1,3 +0,0 @@
-{
-  "devices": []
-}

package/experiments-app/.expo/packager-info.json

@@ -1,9 +0,0 @@
-{
-  "expoServerPort": null,
-  "packagerPort": null,
-  "packagerPid": null,
-  "expoServerNgrokUrl": null,
-  "packagerNgrokUrl": null,
-  "ngrokPid": null,
-  "webpackServerPort": null
-}

package/experiments-app/.expo/settings.json

@@ -1,9 +0,0 @@
-{
-  "hostType": "lan",
-  "lanType": "ip",
-  "dev": true,
-  "minify": false,
-  "urlRandomness": null,
-  "https": false,
-  "scheme": null
-}

package/experiments-app/.gitignore

@@ -1,17 +0,0 @@
-node_modules/
-.expo/
-dist/
-npm-debug.*
-*.jks
-*.p8
-*.p12
-*.key
-*.mobileprovision
-*.orig.*
-web-build/
-
-# macOS
-.DS_Store
-
-# Temporary files created by Metro to check the health of the file watcher
-.metro-health-check*

package/experiments-app/.prettierrc.js

@@ -1,5 +0,0 @@
-// added for Jest inline snapshots to not use default Prettier config
-module.exports = {
-  singleQuote: true,
-  trailingComma: "es5"
-}

package/experiments-app/app.json

@@ -1,30 +0,0 @@
-{
-  "expo": {
-    "name": "experiments-app",
-    "slug": "experiments-app",
-    "version": "1.0.0",
-    "orientation": "portrait",
-    "icon": "./assets/icon.png",
-    "userInterfaceStyle": "light",
-    "splash": {
-      "image": "./assets/splash.png",
-      "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
-    },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
-    "ios": {
-      "supportsTablet": true
-    },
-    "android": {
-      "adaptiveIcon": {
-        "foregroundImage": "./assets/adaptive-icon.png",
-        "backgroundColor": "#ffffff"
-      }
-    },
-    "web": {
-      "favicon": "./assets/favicon.png"
-    }
-  }
-}

package/experiments-app/babel.config.js

@@ -1,6 +0,0 @@
-module.exports = function(api) {
-  api.cache(true);
-  return {
-    presets: ['babel-preset-expo'],
-  };
-};

package/experiments-app/index.js

@@ -1,4 +0,0 @@
-import registerRootComponent from 'expo/build/launch/registerRootComponent';
-import App from './src/App';
-
-registerRootComponent(App);

package/experiments-app/package.json

@@ -1,29 +0,0 @@
-{
-  "name": "experiments-app",
-  "private": true,
-  "description": "Expo app for conducting experiments of React Native behaviour.",
-  "version": "1.0.0",
-  "main": "index.js",
-  "scripts": {
-    "typecheck": "tsc -noEmit",
-    "start": "expo start",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
-    "web": "expo start --web"
-  },
-  "dependencies": {
-    "@react-navigation/native": "^6.1.6",
-    "@react-navigation/native-stack": "^6.9.12",
-    "expo": "^49.0.0",
-    "expo-status-bar": "~1.6.0",
-    "react": "18.2.0",
-    "react-native": "0.72.3",
-    "react-native-safe-area-context": "4.6.3",
-    "react-native-screens": "~3.22.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.20.0",
-    "@types/react": "~18.2.14",
-    "typescript": "^5.1.3"
-  }
-}

package/experiments-app/src/App.tsx

@@ -1,31 +0,0 @@
-import * as React from 'react';
-import { StatusBar } from 'expo-status-bar';
-import { NavigationContainer } from '@react-navigation/native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import { MainScreen } from './MainScreen';
-import { experiments } from './experiments';
-
-const Stack = createNativeStackNavigator();
-
-export default function App() {
-  return (
-    <NavigationContainer>
-      <Stack.Navigator>
-        <Stack.Screen
-          name="main"
-          component={MainScreen}
-          options={{ title: 'Experiments' }}
-        />
-        {experiments.map((exp) => (
-          <Stack.Screen
-            key={exp.key}
-            name={exp.key}
-            component={exp.component}
-            options={{ title: exp.title }}
-          />
-        ))}
-      </Stack.Navigator>
-      <StatusBar style="auto" />
-    </NavigationContainer>
-  );
-}

package/experiments-app/src/MainScreen.tsx

@@ -1,52 +0,0 @@
-import * as React from 'react';
-import {
-  StyleSheet,
-  SafeAreaView,
-  Text,
-  FlatList,
-  Pressable,
-} from 'react-native';
-import { useNavigation } from '@react-navigation/native';
-import { Experiment, experiments } from './experiments';
-
-export function MainScreen() {
-  return (
-    <SafeAreaView style={styles.container}>
-      <FlatList
-        data={experiments}
-        renderItem={({ item }) => <ListItem item={item} />}
-      />
-    </SafeAreaView>
-  );
-}
-
-interface ListItemProps {
-  item: Experiment;
-}
-
-function ListItem({ item }: ListItemProps) {
-  const navigation = useNavigation();
-
-  const handlePress = () => {
-    // @ts-expect-error missing navigation typing
-    navigation.navigate(item.key);
-  };
-
-  return (
-    <Pressable style={styles.item} onPress={handlePress}>
-      <Text style={styles.itemTitle}>{item.title}</Text>
-    </Pressable>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  item: {
-    padding: 20,
-  },
-  itemTitle: {
-    fontSize: 20,
-  },
-});

package/experiments-app/src/experiments.ts

@@ -1,35 +0,0 @@
-import { TextInputEventPropagation } from './screens/TextInputEventPropagation';
-import { TextInputEvents } from './screens/TextInputEvents';
-import { ScrollViewEvents } from './screens/ScrollViewEvents';
-import { FlatListEvents } from './screens/FlatListEvents';
-import { SectionListEvents } from './screens/SectionListEvents';
-
-export type Experiment = (typeof experiments)[number];
-
-export const experiments = [
-  {
-    key: 'TextInputEvents',
-    title: 'TextInput Events',
-    component: TextInputEvents,
-  },
-  {
-    key: 'TextInputEventPropagation',
-    title: 'TextInput Event Propagation',
-    component: TextInputEventPropagation,
-  },
-  {
-    key: 'ScrollViewEvents',
-    title: 'ScrollView Events',
-    component: ScrollViewEvents,
-  },
-  {
-    key: 'FlatListEvents',
-    title: 'FlatList Events',
-    component: FlatListEvents,
-  },
-  {
-    key: 'SectionListEvents',
-    title: 'SectionList Events',
-    component: SectionListEvents,
-  },
-];

package/experiments-app/src/screens/FlatListEvents.tsx

@@ -1,57 +0,0 @@
-import * as React from 'react';
-import { FlatList, StyleSheet, Text, View } from 'react-native';
-import { customEventLogger, nativeEventLogger } from '../utils/helpers';
-
-interface ItemData {
-  id: string;
-  title: string;
-}
-
-const data: ItemData[] = [...new Array(25)].map((_, index) => ({
-  id: `${index + 1}`,
-  title: `Item ${index + 1}`,
-}));
-
-export function FlatListEvents() {
-  const renderItem = ({ item }: { item: ItemData }) => {
-    return <Item item={item} />;
-  };
-
-  return (
-    <FlatList
-      data={data}
-      renderItem={renderItem}
-      keyExtractor={(item) => item.id}
-      contentInsetAdjustmentBehavior="scrollableAxes"
-      scrollEventThrottle={150}
-      onScroll={nativeEventLogger('scroll')}
-      onScrollBeginDrag={nativeEventLogger('scrollBeginDrag')}
-      onScrollEndDrag={nativeEventLogger('scrollEndDrag')}
-      onMomentumScrollBegin={nativeEventLogger('momentumScrollBegin')}
-      onMomentumScrollEnd={nativeEventLogger('momentumScrollEnd')}
-      onScrollToTop={nativeEventLogger('scrollToTop')}
-      onEndReached={customEventLogger('endReached')}
-      onContentSizeChange={customEventLogger('contentSizeChange')}
-    />
-  );
-}
-
-interface ItemProps {
-  item: ItemData;
-}
-
-const Item = ({ item }: ItemProps) => (
-  <View style={styles.item}>
-    <Text style={styles.title}>{item.title}</Text>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  item: {
-    paddingVertical: 16,
-    paddingHorizontal: 20,
-  },
-  title: {
-    fontSize: 20,
-  },
-});

package/experiments-app/src/screens/ScrollViewEvents.tsx

@@ -1,65 +0,0 @@
-import * as React from 'react';
-import { StyleSheet, Text, ScrollView } from 'react-native';
-import { customEventLogger, nativeEventLogger } from '../utils/helpers';
-
-export function ScrollViewEvents() {
-  return (
-    <ScrollView
-      contentInsetAdjustmentBehavior="scrollableAxes"
-      scrollEventThrottle={150}
-      onScroll={nativeEventLogger('scroll')}
-      onScrollBeginDrag={nativeEventLogger('scrollBeginDrag')}
-      onScrollEndDrag={nativeEventLogger('scrollEndDrag')}
-      onMomentumScrollBegin={nativeEventLogger('momentumScrollBegin')}
-      onMomentumScrollEnd={nativeEventLogger('momentumScrollEnd')}
-      onScrollToTop={nativeEventLogger('scrollToTop')}
-      onContentSizeChange={customEventLogger('contentSizeChange')}
-    >
-      <Text style={styles.text}>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Gravida neque
-        convallis a cras semper auctor neque. Ultrices in iaculis nunc sed augue
-        lacus. Vulputate ut pharetra sit amet aliquam id. Eget sit amet tellus
-        cras adipiscing enim. Velit aliquet sagittis id consectetur purus ut
-        faucibus pulvinar.
-      </Text>
-      <Text style={styles.text}>
-        Eget gravida cum sociis natoque penatibus. Nunc sed blandit libero
-        volutpat sed cras. Aliquet bibendum enim facilisis gravida neque
-        convallis a cras. Euismod nisi porta lorem mollis aliquam. Consequat
-        mauris nunc congue nisi vitae suscipit tellus. Mauris pellentesque
-        pulvinar pellentesque habitant morbi tristique. Nulla aliquet enim
-        tortor at auctor.
-      </Text>
-      <Text style={styles.text}>
-        A condimentum vitae sapien pellentesque. Quis eleifend quam adipiscing
-        vitae. Elit ut aliquam purus sit amet luctus venenatis. Id faucibus nisl
-        tincidunt eget nullam non nisi est. Nunc non blandit massa enim nec dui
-        nunc. Urna nec tincidunt praesent semper feugiat nibh. Malesuada fames
-        ac turpis egestas maecenas. Viverra nibh cras pulvinar mattis nunc sed
-        blandit.
-      </Text>
-      <Text style={styles.text}>
-        Molestie nunc non blandit massa enim nec dui nunc. Velit laoreet id
-        donec ultrices tincidunt arcu. Imperdiet nulla malesuada pellentesque
-        elit eget. Id neque aliquam vestibulum morbi blandit cursus. Ut
-        tristique et egestas quis. Nisl nunc mi ipsum faucibus vitae aliquet nec
-        ullamcorper sit. Cursus mattis molestie a iaculis at erat.
-      </Text>
-      <Text style={styles.text}>
-        Tincidunt arcu non sodales neque sodales ut etiam. Ultrices dui sapien
-        eget mi proin sed. Metus vulputate eu scelerisque felis. In pellentesque
-        massa placerat duis ultricies lacus sed turpis. Id leo in vitae turpis
-        massa sed elementum.
-      </Text>
-    </ScrollView>
-  );
-}
-
-const styles = StyleSheet.create({
-  text: {
-    paddingHorizontal: 20,
-    paddingTop: 20,
-    fontSize: 24,
-  },
-});

package/experiments-app/src/screens/SectionListEvents.tsx

@@ -1,91 +0,0 @@
-import * as React from 'react';
-import { StyleSheet, Text, View, SectionList } from 'react-native';
-import { customEventLogger, nativeEventLogger } from '../utils/helpers';
-
-interface SectionData {
-  title: string;
-  data: string[];
-}
-
-const sections: SectionData[] = [
-  {
-    title: 'Main dishes',
-    data: [
-      'Pizza',
-      'Burger',
-      'Risotto',
-      'Pasta',
-      'Fish',
-      'Chicken',
-      'Beef',
-      'Dumplings',
-    ],
-  },
-  {
-    title: 'Sides',
-    data: [
-      'French Fries',
-      'Onion Rings',
-      'Fried Shrimps',
-      'Potatoes',
-      'Salad',
-      'Garlic Bread',
-    ],
-  },
-  {
-    title: 'Drinks',
-    data: ['Water', 'Coke', 'Beer', 'Tea', 'Coffee', 'Soda', 'Matcha'],
-  },
-  {
-    title: 'Desserts',
-    data: ['Cheese Cake', 'Ice Cream', 'Chocolate', 'Cookies', 'Fruits'],
-  },
-];
-
-export function SectionListEvents() {
-  const renderSectionHeader = ({ section }: { section: SectionData }) => (
-    <Text style={styles.header}>{section.title}</Text>
-  );
-
-  const renderItem = ({ item }: { item: string }) => (
-    <View style={styles.item}>
-      <Text style={styles.title}>{item}</Text>
-    </View>
-  );
-
-  return (
-    <SectionList
-      sections={sections}
-      keyExtractor={(item, index) => item + index}
-      renderSectionHeader={renderSectionHeader}
-      renderItem={renderItem}
-      contentInsetAdjustmentBehavior="scrollableAxes"
-      scrollEventThrottle={150}
-      onScroll={nativeEventLogger('scroll')}
-      onScrollBeginDrag={nativeEventLogger('scrollBeginDrag')}
-      onScrollEndDrag={nativeEventLogger('scrollEndDrag')}
-      onMomentumScrollBegin={nativeEventLogger('momentumScrollBegin')}
-      onMomentumScrollEnd={nativeEventLogger('momentumScrollEnd')}
-      onScrollToTop={nativeEventLogger('scrollToTop')}
-      onEndReached={customEventLogger('endReached')}
-      onContentSizeChange={customEventLogger('contentSizeChange')}
-    />
-  );
-}
-
-const styles = StyleSheet.create({
-  header: {
-    paddingVertical: 8,
-    paddingHorizontal: 16,
-    backgroundColor: 'white',
-    fontSize: 24,
-  },
-  item: {
-    paddingVertical: 16,
-    paddingHorizontal: 16,
-  },
-
-  title: {
-    fontSize: 20,
-  },
-});

package/experiments-app/src/screens/TextInputEventPropagation.tsx

@@ -1,42 +0,0 @@
-import * as React from 'react';
-import { StyleSheet, SafeAreaView, TextInput, Pressable } from 'react-native';
-import { nativeEventLogger } from '../utils/helpers';
-
-export function TextInputEventPropagation() {
-  const [value, setValue] = React.useState('');
-
-  const handleChangeText = (value: string) => {
-    setValue(value);
-    console.log(`Event: changeText`, value);
-  };
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <Pressable onPress={nativeEventLogger('Pressable.press')}>
-        <TextInput
-          style={styles.textInput}
-          value={value}
-          editable={true}
-          onChangeText={handleChangeText}
-          onChange={nativeEventLogger('TextInput.change')}
-          onPressIn={nativeEventLogger('TextInput.pressIn')}
-          onPressOut={nativeEventLogger('TextInput.pressOut')}
-        />
-      </Pressable>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  textInput: {
-    backgroundColor: 'white',
-    margin: 20,
-    padding: 8,
-    fontSize: 18,
-    borderWidth: 1,
-    borderColor: 'grey',
-  },
-});

package/experiments-app/src/screens/TextInputEvents.tsx

@@ -1,48 +0,0 @@
-import * as React from 'react';
-import { StyleSheet, SafeAreaView, TextInput } from 'react-native';
-import { nativeEventLogger, logEvent } from '../utils/helpers';
-
-export function TextInputEvents() {
-  const [value, setValue] = React.useState('');
-
-  const handleChangeText = (value: string) => {
-    setValue(value);
-    logEvent('changeText', value);
-  };
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <TextInput
-        style={styles.textInput}
-        value={value}
-        editable={true}
-        onChangeText={handleChangeText}
-        onChange={nativeEventLogger('change')}
-        onKeyPress={nativeEventLogger('keyPress')}
-        onEndEditing={nativeEventLogger('endEditing')}
-        onSubmitEditing={nativeEventLogger('submitEditing')}
-        onTextInput={nativeEventLogger('textInput')}
-        onSelectionChange={nativeEventLogger('selectionChange')}
-        onContentSizeChange={nativeEventLogger('contentSizeChange')}
-        onFocus={nativeEventLogger('focus')}
-        onBlur={nativeEventLogger('blur')}
-        onPressIn={nativeEventLogger('pressIn')}
-        onPressOut={nativeEventLogger('pressOut')}
-      />
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  textInput: {
-    backgroundColor: 'white',
-    margin: 20,
-    padding: 8,
-    fontSize: 18,
-    borderWidth: 1,
-    borderColor: 'grey',
-  },
-});

package/experiments-app/src/utils/helpers.ts

@@ -1,18 +0,0 @@
-import { NativeSyntheticEvent } from 'react-native/types';
-
-export function nativeEventLogger(name: string) {
-  return (event: NativeSyntheticEvent<unknown>) => {
-    logEvent(name, event?.nativeEvent);
-  };
-}
-
-export function customEventLogger(name: string) {
-  return (...args: unknown[]) => {
-    logEvent(name, ...args);
-  };
-}
-
-export function logEvent(name: string, ...args: unknown[]) {
-  // eslint-disable-next-line no-console
-  console.log(`Event: ${name}`, ...args);
-}

package/experiments-app/tsconfig.json

@@ -1,6 +0,0 @@
-{
-  "extends": "expo/tsconfig.base",
-  "compilerOptions": {
-    "strict": true
-  }
-}