@testing-library/react-native 12.2.0 → 12.2.2

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/settings.json

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

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,31 +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",
-    "add": "^2.0.6",
-    "expo": "~48.0.11",
-    "expo-status-bar": "~1.4.4",
-    "react": "18.2.0",
-    "react-native": "0.71.6",
-    "react-native-safe-area-context": "4.5.0",
-    "react-native-screens": "~3.20.0",
-    "yarn": "^1.22.19"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.20.0",
-    "@types/react": "~18.0.14",
-    "typescript": "^4.9.4"
-  }
-}

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,51 +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 = () => {
-    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,17 +0,0 @@
-import { TextInputEventPropagation } from './screens/TextInputEventPropagation';
-import { TextInputEvents } from './screens/TextInputEvents';
-
-export type Experiment = (typeof experiments)[number];
-
-export const experiments = [
-  {
-    key: 'textInputEvents',
-    title: 'TextInput Events',
-    component: TextInputEvents,
-  },
-  {
-    key: 'textInputEventPropagation',
-    title: 'TextInput Event Propagation',
-    component: TextInputEventPropagation,
-  },
-];

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

@@ -1,54 +0,0 @@
-import * as React from 'react';
-import { StyleSheet, SafeAreaView, TextInput, Pressable } from 'react-native';
-import { buildEventLogger } from '../utils/helpers';
-
-const handlePressIn = buildEventLogger('TextInput.pressIn');
-const handlePressOut = buildEventLogger('TextInput.pressOut');
-const handleFocus = buildEventLogger('TextInput.focus');
-const handleBlur = buildEventLogger('TextInput.blur');
-const handleChange = buildEventLogger('TextInput.change');
-const handleSubmitEditing = buildEventLogger('TextInput.submitEditing');
-
-const handlePressablePress = buildEventLogger('Pressable.press');
-
-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={handlePressablePress}>
-        <TextInput
-          style={styles.textInput}
-          value={value}
-          editable={true}
-          onChangeText={handleChangeText}
-          onPressIn={handlePressIn}
-          onPressOut={handlePressOut}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          onChange={handleChange}
-          onSubmitEditing={handleSubmitEditing}
-        />
-      </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,60 +0,0 @@
-import * as React from 'react';
-import { StyleSheet, SafeAreaView, TextInput } from 'react-native';
-import { buildEventLogger } from '../utils/helpers';
-
-const handlePressIn = buildEventLogger('pressIn');
-const handlePressOut = buildEventLogger('pressOut');
-const handleFocus = buildEventLogger('focus');
-const handleBlur = buildEventLogger('blur');
-const handleChange = buildEventLogger('change');
-const handleEndEditing = buildEventLogger('endEditing');
-const handleSubmitEditing = buildEventLogger('submitEditing');
-const handleKeyPress = buildEventLogger('keyPress');
-const handleTextInput = buildEventLogger('textInput');
-const handleSelectionChange = buildEventLogger('selectionChange');
-const handleContentSizeChange = buildEventLogger('contentSizeChange');
-
-export function TextInputEvents() {
-  const [value, setValue] = React.useState('');
-
-  const handleChangeText = (value: string) => {
-    setValue(value);
-    console.log(`Event: changeText`, value);
-  };
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <TextInput
-        style={styles.textInput}
-        value={value}
-        editable={true}
-        onChangeText={handleChangeText}
-        onPressIn={handlePressIn}
-        onPressOut={handlePressOut}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        onChange={handleChange}
-        onEndEditing={handleEndEditing}
-        onSubmitEditing={handleSubmitEditing}
-        onKeyPress={handleKeyPress}
-        onTextInput={handleTextInput}
-        onSelectionChange={handleSelectionChange}
-        onContentSizeChange={handleContentSizeChange}
-      />
-    </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,8 +0,0 @@
-import { NativeSyntheticEvent } from 'react-native/types';
-
-export function buildEventLogger(name: string) {
-  return (event: NativeSyntheticEvent<unknown>) => {
-    const eventData = event?.nativeEvent ?? event;
-    console.log(`Event: ${name}`, eventData);
-  };
-}

package/experiments-app/tsconfig.json

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