flip/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/FlipsideCrypto/DefinitelyTyped.git synced 2026-02-06 10:56:53 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[react-native] Prepare for 0.62 (#43179)

Browse Source 
* Feature: unstable_enableLogBox function at 0.62

* [@types/react-native] Add Appearance namespace for new api from v0.62.x

* feat: add typing for useColorScheme hook

* Add type for fadingEdgeLength prop

This adds the types for FlatList and ScrollView on Android

* [react-native] Introduce HostComponent

* [react-native] Make useNativeDriver parameter required

* d123bea8c1
* 5876052615

* feat: add typings for A11yValue in RN

* [react-native] Import v0.61 typings

* [react-native] Run prettier

* [react-native] Try fixing v0.61 on CI

* [react-native] Defer v0.61 typings to next iteration

Co-authored-by: Shinpei <react-native@kakao.com>
Co-authored-by: Jérémy Barbet <jeremgraph@gmail.com>
Co-authored-by: André Krüger <andre.krueger.developer@gmail.com>
Co-authored-by: Kacper Wiszczuk <kacperwiszczuk@gmail.com>
This commit is contained in:
Eloy Durán 2020-03-27 18:41:12 +01:00 committed by GitHub
parent ea2c63dc94
commit 1e63996a10
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 560 additions and 406 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
types/react-native-sortable-list/react-native-sortable-list-tests.tsx
View File

@ -151,12 +151,14 @@ class Row extends React.Component<RowProps, RowState> {
Animated.timing(style.transform[0].scale, {
duration: 100,
easing: Easing.out(Easing.quad),
toValue: 1.1
toValue: 1.1,
useNativeDriver: false,
}),
Animated.timing(style.shadowRadius, {
duration: 100,
easing: Easing.out(Easing.quad),
toValue: 10
toValue: 10,
useNativeDriver: false,
}),
]).start();
}
@ -168,12 +170,14 @@ class Row extends React.Component<RowProps, RowState> {
Animated.timing(style.transform[0].scale, {
duration: 100,
easing: Easing.out(Easing.quad),
toValue: 1
toValue: 1,
useNativeDriver: false,
}),
Animated.timing(style.shadowRadius, {
duration: 100,
easing: Easing.out(Easing.quad),
toValue: 2
toValue: 2,
useNativeDriver: false,
}),
]).start();
}

10
types/react-native/globals.d.ts vendored
View File

@ -302,14 +302,14 @@ declare var WebSocket: {
uri: string,
protocols?: string | string[] | null,
options?: {
headers: {[headerName: string]: string};
headers: { [headerName: string]: string };
[optionName: string]: any;
} | null,
): WebSocket;
readonly CLOSED: number;
readonly CLOSING: number;
readonly CONNECTING: number;
readonly OPEN: number;
readonly CLOSED: number;
readonly CLOSING: number;
readonly CONNECTING: number;
readonly OPEN: number;
};
//

519
types/react-native/index.d.ts vendored
View File

File diff suppressed because it is too large Load Diff

6
types/react-native/test/ART.tsx
View File

@ -1,5 +1,5 @@
import * as React from "react";
import * as ReactNative from "react-native";
import * as React from 'react';
import * as ReactNative from 'react-native';
// See https://github.com/react-native-china/react-native-ART-doc/blob/6ba9c0f7c7e495a12045f3d7061834d2c74413c5/doc.md
@ -10,7 +10,7 @@ class Test extends React.Component {
return (
<Surface width={200} height={200}>
<ClippingRectangle width={20} height={20} x={100} y={100}>
<Shape d={/*new Path().moveTo(0,0).lineTo(200,200)*/ "fixme"} stroke="black" strokeWidth={10} />
<Shape d={/*new Path().moveTo(0,0).lineTo(200,200)*/ 'fixme'} stroke="black" strokeWidth={10} />
</ClippingRectangle>
</Surface>
);

23
types/react-native/test/animated.tsx
View File

@ -1,6 +1,6 @@
import * as React from "react";
import * as React from 'react';
import { Animated, View, NativeSyntheticEvent, NativeScrollEvent } from "react-native";
import { Animated, View, NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
function TestAnimatedAPI() {
// Value
@ -20,6 +20,7 @@ function TestAnimatedAPI() {
Animated.timing(v2, {
toValue: v1.interpolate({ inputRange: [0, 1], outputRange: [0, 200] }),
useNativeDriver: false,
});
// ValueXY
@ -30,6 +31,7 @@ function TestAnimatedAPI() {
toValue: 0.5,
tension: 10,
delay: 100,
useNativeDriver: false,
});
const springXY = Animated.spring(position, {
@ -37,17 +39,25 @@ function TestAnimatedAPI() {
x: 1,
y: 2,
},
useNativeDriver: false,
});
spring1.start();
spring1.stop();
Animated.parallel([Animated.spring(v1, { toValue: 1 }), Animated.spring(v2, { toValue: 1 })], {
stopTogether: true,
});
Animated.parallel(
[
Animated.spring(v1, { toValue: 1, useNativeDriver: false }),
Animated.spring(v2, { toValue: 1, useNativeDriver: false }),
],
{
stopTogether: true,
},
);
Animated.decay(v1, {
velocity: 2,
useNativeDriver: false,
});
Animated.timing(v1, {
@ -55,6 +65,7 @@ function TestAnimatedAPI() {
duration: 100,
delay: 100,
easing: v => v,
useNativeDriver: false,
});
Animated.add(v1, v2);
@ -88,7 +99,7 @@ function TestAnimatedAPI() {
]}
/>
<Animated.Image style={position.getTranslateTransform()} source={{uri: 'https://picsum.photos/200'}} />
<Animated.Image style={position.getTranslateTransform()} source={{ uri: 'https://picsum.photos/200' }} />
</View>
);
}

20
types/react-native/test/globals.tsx
View File

@ -1,15 +1,15 @@
const fetchCopy: WindowOrWorkerGlobalScope["fetch"] = fetch;
const fetchCopy: WindowOrWorkerGlobalScope['fetch'] = fetch;
const myHeaders = new Headers();
myHeaders.append("Content-Type", "image/jpeg");
myHeaders.append('Content-Type', 'image/jpeg');
const myInit: RequestInit = {
method: "GET",
method: 'GET',
headers: myHeaders,
mode: "cors",
mode: 'cors',
};
const myRequest = new Request("flowers.jpg");
const myRequest = new Request('flowers.jpg');
fetch(myRequest, myInit)
.then(response => {
@ -23,16 +23,16 @@ fetch(myRequest, myInit)
return response.blob();
})
.then(blob => {
const init = { status: 200, statusText: "SuperSmashingGreat!" };
const init = { status: 200, statusText: 'SuperSmashingGreat!' };
const myResponse = new Response(blob, init);
});
const xmlRequest = new XMLHttpRequest();
xmlRequest.addEventListener("load", (ev) => {
console.log(ev.lengthComputable)
console.log(ev.loaded)
console.log(ev.total)
xmlRequest.addEventListener('load', ev => {
console.log(ev.lengthComputable);
console.log(ev.loaded);
console.log(ev.total);
});
const test = new URLSearchParams();

369
types/react-native/test/index.tsx
View File

@ -11,8 +11,8 @@ The content of index.io.js could be something like
For a list of complete Typescript examples: check https://github.com/bgrieder/RNTSExplorer
*/
import * as PropTypes from "prop-types";
import * as React from "react";
import * as PropTypes from 'prop-types';
import * as React from 'react';
import {
Alert,
AppState,
@ -93,9 +93,12 @@ import {
AccessibilityInfo,
YellowBox,
useWindowDimensions,
} from "react-native";
HostComponent,
Appearance,
useColorScheme,
} from 'react-native';
declare module "react-native" {
declare module 'react-native' {
interface NativeTypedModule {
someFunction(): void;
someProperty: string;
@ -108,28 +111,28 @@ declare module "react-native" {
NativeModules.NativeUntypedModule;
NativeModules.NativeTypedModule.someFunction();
NativeModules.NativeTypedModule.someProperty = "";
NativeModules.NativeTypedModule.someProperty = '';
function dimensionsListener(dimensions: { window: ScaledSize; screen: ScaledSize }) {
console.log("window dimensions: ", dimensions.window);
console.log("screen dimensions: ", dimensions.screen);
console.log('window dimensions: ', dimensions.window);
console.log('screen dimensions: ', dimensions.screen);
}
function testDimensions() {
const { width, height, scale, fontScale } = Dimensions.get(1 === 1 ? "window" : "screen");
const { width, height, scale, fontScale } = Dimensions.get(1 === 1 ? 'window' : 'screen');
Dimensions.addEventListener("change", dimensionsListener);
Dimensions.removeEventListener("change", dimensionsListener);
Dimensions.addEventListener('change', dimensionsListener);
Dimensions.removeEventListener('change', dimensionsListener);
}
function TextUseWindowDimensions() {
const {width, height, scale, fontScale} = useWindowDimensions()
const { width, height, scale, fontScale } = useWindowDimensions();
}
BackHandler.addEventListener("hardwareBackPress", () => true).remove();
BackHandler.addEventListener("hardwareBackPress", () => false).remove();
BackHandler.addEventListener("hardwareBackPress", () => undefined).remove();
BackHandler.addEventListener("hardwareBackPress", () => null).remove();
BackHandler.addEventListener('hardwareBackPress', () => true).remove();
BackHandler.addEventListener('hardwareBackPress', () => false).remove();
BackHandler.addEventListener('hardwareBackPress', () => undefined).remove();
BackHandler.addEventListener('hardwareBackPress', () => null).remove();
interface LocalStyles {
container: ViewStyle;
@ -140,18 +143,18 @@ interface LocalStyles {
const styles = StyleSheet.create<LocalStyles>({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF",
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: "center",
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: "center",
color: "#333333",
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
@ -160,38 +163,38 @@ const styles = StyleSheet.create<LocalStyles>({
const stylesAlt = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF",
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: "center",
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: "center",
color: "#333333",
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
StyleSheet.setStyleAttributePreprocessor("fontFamily", (family: string) => family);
StyleSheet.setStyleAttributePreprocessor('fontFamily', (family: string) => family);
const welcomeFontSize = StyleSheet.flatten(styles.welcome).fontSize;
const viewStyle: StyleProp<ViewStyle> = {
backgroundColor: "#F5FCFF",
backgroundColor: '#F5FCFF',
};
const textStyle: StyleProp<TextStyle> = {
fontSize: 20,
};
const imageStyle: StyleProp<ImageStyle> = {
resizeMode: "contain",
resizeMode: 'contain',
};
const fontVariantStyle: StyleProp<TextStyle> = {
fontVariant: ['tabular-nums']
}
fontVariant: ['tabular-nums'],
};
const viewProperty = StyleSheet.flatten(viewStyle).backgroundColor;
const textProperty = StyleSheet.flatten(textStyle).fontSize;
@ -205,7 +208,7 @@ const { top } = flattenStyle;
const s = StyleSheet.create({
shouldWork: {
fontWeight: "900", // if we comment this line, errors gone
fontWeight: '900', // if we comment this line, errors gone
marginTop: 5, // if this line commented, errors also gone
},
});
@ -223,40 +226,22 @@ const composeImageStyle: StyleProp<ImageStyle> = {
};
// The following use of the compose method is valid
const combinedStyle: StyleProp<TextStyle> = StyleSheet.compose(
composeTextStyle,
composeTextStyle,
);
const combinedStyle: StyleProp<TextStyle> = StyleSheet.compose(composeTextStyle, composeTextStyle);
const combinedStyle1: StyleProp<ImageStyle> = StyleSheet.compose(
composeImageStyle,
composeImageStyle,
);
const combinedStyle1: StyleProp<ImageStyle> = StyleSheet.compose(composeImageStyle, composeImageStyle);
const combinedStyle2: StyleProp<TextStyle> = StyleSheet.compose(
[composeTextStyle],
[composeTextStyle],
);
const combinedStyle2: StyleProp<TextStyle> = StyleSheet.compose([composeTextStyle], [composeTextStyle]);
const combinedStyle3: StyleProp<TextStyle> = StyleSheet.compose(
composeTextStyle,
null,
);
const combinedStyle3: StyleProp<TextStyle> = StyleSheet.compose(composeTextStyle, null);
const combinedStyle4: StyleProp<TextStyle> = StyleSheet.compose(
[composeTextStyle],
null,
);
const combinedStyle4: StyleProp<TextStyle> = StyleSheet.compose([composeTextStyle], null);
const combinedStyle5: StyleProp<TextStyle> = StyleSheet.compose(
composeTextStyle,
Math.random() < 0.5 ? composeTextStyle : null,
);
const combinedStyle6: StyleProp<TextStyle | null> = StyleSheet.compose(
null,
null,
);
const combinedStyle6: StyleProp<TextStyle | null> = StyleSheet.compose(null, null);
// The following use of the compose method is invalid:
const combinedStyle7 = StyleSheet.compose(composeImageStyle, composeTextStyle); // $ExpectError
@ -338,7 +323,7 @@ class Welcome extends React.Component<ElementProps<View> & { color: string }> {
<Text style={styles.welcome}>Welcome to React Native</Text>
<Text style={styles.instructions}>To get started, edit index.ios.js</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{"\n"}
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
<CustomView ref="customView" />
@ -360,7 +345,7 @@ export class TouchableNativeFeedbackTest extends React.Component {
render() {
return (
<TouchableNativeFeedback onPress={this.onPressButton}>
<View style={{ width: 150, height: 100, backgroundColor: "red" }}>
<View style={{ width: 150, height: 100, backgroundColor: 'red' }}>
<Text style={{ margin: 30 }}>Button</Text>
</View>
</TouchableNativeFeedback>
@ -370,14 +355,14 @@ export class TouchableNativeFeedbackTest extends React.Component {
// App State
function appStateListener(state: string) {
console.log("New state: " + state);
console.log('New state: ' + state);
}
function appStateTest() {
console.log("Current state: " + AppState.currentState);
AppState.addEventListener("change", appStateListener);
AppState.addEventListener("blur", appStateListener);
AppState.addEventListener("focus", appStateListener);
console.log('Current state: ' + AppState.currentState);
AppState.addEventListener('change', appStateListener);
AppState.addEventListener('blur', appStateListener);
AppState.addEventListener('focus', appStateListener);
}
// ViewPagerAndroid
@ -387,7 +372,7 @@ export class ViewPagerAndroidTest {
<ViewPagerAndroid
style={{ height: 56 }}
initialPage={0}
keyboardDismissMode={"on-drag"}
keyboardDismissMode={'on-drag'}
onPageScroll={e => {
console.log(`position: ${e.nativeEvent.position}`);
console.log(`offset: ${e.nativeEvent.offset}`);
@ -400,12 +385,12 @@ export class ViewPagerAndroidTest {
}
}
const profiledJSONParse = Systrace.measure("JSON", "parse", JSON.parse);
profiledJSONParse("[]");
const profiledJSONParse = Systrace.measure('JSON', 'parse', JSON.parse);
profiledJSONParse('[]');
InteractionManager.runAfterInteractions(() => {
// ...
}).then(() => "done");
}).then(() => 'done');
export class FlatListTest extends React.Component<FlatListProps<number>, {}> {
list: FlatList<any> | null = null;
@ -424,7 +409,7 @@ export class FlatListTest extends React.Component<FlatListProps<number>, {}> {
);
};
_renderSeparator = () => <View style={{ height: 1, width: "100%", backgroundColor: "gray" }} />;
_renderSeparator = () => <View style={{ height: 1, width: '100%', backgroundColor: 'gray' }} />;
render() {
return (
@ -437,6 +422,7 @@ export class FlatListTest extends React.Component<FlatListProps<number>, {}> {
ListFooterComponentStyle={{ padding: 8 }}
ListHeaderComponent={null}
ListHeaderComponentStyle={{ padding: 8 }}
fadingEdgeLength={200}
/>
);
}
@ -457,12 +443,12 @@ export class SectionListTest extends React.Component<SectionListProps<string>, {
render() {
const sections = [
{
title: "Section 1",
data: ["A", "B", "C", "D", "E"],
title: 'Section 1',
data: ['A', 'B', 'C', 'D', 'E'],
},
{
title: "Section 2",
data: ["A2", "B2", "C2", "D2", "E2"],
title: 'Section 2',
data: ['A2', 'B2', 'C2', 'D2', 'E2'],
renderItem: (info: { item: string }) => (
<View>
<Text>{info.item}</Text>
@ -497,16 +483,17 @@ export class SectionListTest extends React.Component<SectionListProps<string>, {
export class CapsLockComponent extends React.Component<TextProps> {
render() {
const content = (this.props.children || "") as string;
const content = (this.props.children || '') as string;
return <Text {...this.props}>{content.toUpperCase()}</Text>;
}
}
const getInitialUrlTest = () => Linking.getInitialURL().then(val => {
if (val !== null) {
val.indexOf('val is now a string');
}
})
const getInitialUrlTest = () =>
Linking.getInitialURL().then(val => {
if (val !== null) {
val.indexOf('val is now a string');
}
});
class ScrollerListComponentTest extends React.Component<{}, { dataSource: ListViewDataSource }> {
eventHandler = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
@ -516,7 +503,7 @@ class ScrollerListComponentTest extends React.Component<{}, { dataSource: ListVi
render() {
const scrollViewStyle1 = StyleSheet.create({
scrollView: {
backgroundColor: "red",
backgroundColor: 'red',
},
});
const scrollViewStyle2 = {
@ -527,7 +514,7 @@ class ScrollerListComponentTest extends React.Component<{}, { dataSource: ListVi
dataSource={this.state.dataSource}
renderScrollComponent={props => {
if (props.scrollEnabled) {
throw new Error("Expected scroll to be enabled.");
throw new Error('Expected scroll to be enabled.');
}
return (
@ -543,6 +530,7 @@ class ScrollerListComponentTest extends React.Component<{}, { dataSource: ListVi
style={[scrollViewStyle1.scrollView, scrollViewStyle2]}
onScrollToTop={() => {}}
scrollToOverflowEnabled={true}
fadingEdgeLength={200}
/>
);
}}
@ -589,17 +577,17 @@ class TabBarTest extends React.Component {
class AlertTest extends React.Component {
showAlert() {
Alert.alert(
"Title",
"Message",
'Title',
'Message',
[
{ text: "First button", onPress: () => {} },
{ text: "Second button", onPress: () => {} },
{ text: "Third button", onPress: () => {} },
{ text: 'First button', onPress: () => {} },
{ text: 'Second button', onPress: () => {} },
{ text: 'Third button', onPress: () => {} },
],
{
cancelable: false,
onDismiss: () => {},
}
},
);
}
@ -648,15 +636,19 @@ const CheckboxTest = () => (
<CheckBox
testID="testId"
disabled={false}
onChange={value => { console.log(value); }}
onValueChange={value => { console.log(value); }}
onChange={value => {
console.log(value);
}}
onValueChange={value => {
console.log(value);
}}
value={true}
/>
);
class InputAccessoryViewTest extends React.Component {
render() {
const uniqueID = "foobar";
const uniqueID = 'foobar';
return (
<InputAccessoryView nativeID={uniqueID}>
<TextInput inputAccessoryViewID={uniqueID} />
@ -677,16 +669,16 @@ const dataSourceAssetCallback2: DataSourceAssetCallback = {};
// DeviceEventEmitterStatic
const deviceEventEmitterStatic: DeviceEventEmitterStatic = DeviceEventEmitter;
deviceEventEmitterStatic.addListener("keyboardWillShow", data => true);
deviceEventEmitterStatic.addListener("keyboardWillShow", data => true, {});
deviceEventEmitterStatic.addListener('keyboardWillShow', data => true);
deviceEventEmitterStatic.addListener('keyboardWillShow', data => true, {});
const nativeEventEmitter = new NativeEventEmitter();
nativeEventEmitter.removeAllListeners("event");
nativeEventEmitter.removeAllListeners('event');
class CustomEventEmitter extends NativeEventEmitter {}
const customEventEmitter = new CustomEventEmitter();
customEventEmitter.addListener("event", () => {});
customEventEmitter.addListener('event', () => {});
class TextInputTest extends React.Component<{}, { username: string }> {
username: TextInput | null = null;
@ -777,7 +769,7 @@ class TextInputTest extends React.Component<{}, { username: string }> {
<TextInput multiline onContentSizeChange={this.handleOnContentSizeChange} />
<TextInput contextMenuHidden={true} textAlignVertical="top"/>
<TextInput contextMenuHidden={true} textAlignVertical="top" />
</View>
);
}
@ -785,9 +777,9 @@ class TextInputTest extends React.Component<{}, { username: string }> {
class StatusBarTest extends React.Component {
render() {
StatusBar.setBarStyle("dark-content", true);
StatusBar.setBarStyle('dark-content', true);
console.log("height:", StatusBar.currentHeight);
console.log('height:', StatusBar.currentHeight);
return <StatusBar backgroundColor="blue" barStyle="light-content" translucent />;
}
@ -795,44 +787,45 @@ class StatusBarTest extends React.Component {
export class ImageTest extends React.Component {
componentDidMount(): void {
const uri = "https://seeklogo.com/images/T/typescript-logo-B29A3F462D-seeklogo.com.png";
const uri = 'https://seeklogo.com/images/T/typescript-logo-B29A3F462D-seeklogo.com.png';
const image: ImageResolvedAssetSource = Image.resolveAssetSource({ uri });
console.log(image.width, image.height, image.scale, image.uri);
Image.queryCache && Image.queryCache([uri]).then(({ [uri]: status }) => {
if (status === undefined) {
console.log("Image is not in cache");
} else {
console.log(`Image is in ${status} cache`);
}
})
Image.queryCache &&
Image.queryCache([uri]).then(({ [uri]: status }) => {
if (status === undefined) {
console.log('Image is not in cache');
} else {
console.log(`Image is in ${status} cache`);
}
});
}
handleOnLoad = (e: NativeSyntheticEvent<ImageLoadEventData>) => {
testNativeSyntheticEvent(e);
console.log("height:", e.nativeEvent.source.height);
console.log("width:", e.nativeEvent.source.width);
console.log("url:", e.nativeEvent.source.url);
console.log('height:', e.nativeEvent.source.height);
console.log('width:', e.nativeEvent.source.width);
console.log('url:', e.nativeEvent.source.url);
};
handleOnError = (e: NativeSyntheticEvent<ImageErrorEventData>) => {
testNativeSyntheticEvent(e);
console.log("error:", e.nativeEvent.error);
console.log('error:', e.nativeEvent.error);
};
render() {
const resizeMode: ImageResizeMode = "contain";
const resizeMode: ImageResizeMode = 'contain';
return (
<View>
<Image
source={{ uri: "https://seeklogo.com/images/T/typescript-logo-B29A3F462D-seeklogo.com.png" }}
source={{ uri: 'https://seeklogo.com/images/T/typescript-logo-B29A3F462D-seeklogo.com.png' }}
onLoad={this.handleOnLoad}
onError={this.handleOnError}
/>
<Image
source={{ uri: "https://seeklogo.com/images/T/typescript-logo-B29A3F462D-seeklogo.com.png" }}
source={{ uri: 'https://seeklogo.com/images/T/typescript-logo-B29A3F462D-seeklogo.com.png' }}
resizeMode={resizeMode}
/>
</View>
@ -851,7 +844,7 @@ export class ImageBackgroundProps extends React.Component {
return (
<View>
<ImageBackground
source={{ uri: "https://seeklogo.com/images/T/typescript-logo-B29A3F462D-seeklogo.com.png" }}
source={{ uri: 'https://seeklogo.com/images/T/typescript-logo-B29A3F462D-seeklogo.com.png' }}
imageRef={this.setImageRef}
/>
</View>
@ -866,17 +859,18 @@ class AccessibilityTest extends React.Component {
return (
<View
accessibilityElementsHidden={true}
importantForAccessibility={"no-hide-descendants"}
accessibilityTraits={"none"}
importantForAccessibility={'no-hide-descendants'}
accessibilityTraits={'none'}
onAccessibilityTap={() => {}}
accessibilityRole="header"
accessibilityStates={["selected"]}
accessibilityState={{checked: true}}
accessibilityStates={['selected']}
accessibilityState={{ checked: true }}
accessibilityHint="Very importent header"
accessibilityValue={{ min: 60, max: 120, now: 80 }}
onMagicTap={() => {}}
onAccessibilityEscape={() => {}}
>
<Text accessibilityTraits={["key", "text"]} accessibilityIgnoresInvertColors>
<Text accessibilityTraits={['key', 'text']} accessibilityIgnoresInvertColors>
Text
</Text>
<View />
@ -885,7 +879,9 @@ class AccessibilityTest extends React.Component {
}
}
const AccessibilityInfoFetchTest = AccessibilityInfo.fetch().then((isEnabled) => {console.log(isEnabled)});
const AccessibilityInfoFetchTest = AccessibilityInfo.fetch().then(isEnabled => {
console.log(isEnabled);
});
const KeyboardAvoidingViewTest = () => <KeyboardAvoidingView enabled />;
@ -896,24 +892,24 @@ const TimePickerAndroidTest = () => {
hour: 8,
minute: 15,
is24Hour: true,
mode: "spinner",
mode: 'spinner',
}).then(result => {
if (result.action === TimePickerAndroid.timeSetAction) {
console.log('Time', result.hour, result.minute)
console.log('Time', result.hour, result.minute);
}
});
}
};
const DatePickerAndroidTest = () => {
DatePickerAndroid.open({
date: new Date(),
mode: 'calendar'
mode: 'calendar',
}).then(result => {
if (result.action === DatePickerAndroid.dateSetAction) {
console.log('Date', result.year, result.month, result.day)
console.log('Date', result.year, result.month, result.day);
}
});
}
};
const PickerTest = () => (
<Picker mode="dropdown" selectedValue="v1" onValueChange={(val: string) => {}}>
@ -922,27 +918,39 @@ const PickerTest = () => (
</Picker>
);
const NativeBridgedComponent = requireNativeComponent<{ nativeProp: string }>('NativeBridgedComponent'); // $ExpectType HostComponent<{ nativeProp: string; }>
class BridgedComponentTest extends React.Component {
static propTypes = {
jsProp: PropTypes.string.isRequired,
...ViewPropTypes,
};
nativeComponentRef: React.ElementRef<typeof NativeBridgedComponent> | null;
measureNativeComponent() {
if (this.nativeComponentRef) {
this.nativeComponentRef.measure(
(x, y, width, height, pageX, pageY) => x + y + width + height + pageX + pageY,
);
}
}
render() {
return <NativeBridgedComponent {...this.props} nativeProp="test" />;
return (
<NativeBridgedComponent {...this.props} nativeProp="test" ref={ref => (this.nativeComponentRef = ref)} />
);
}
}
const NativeBridgedComponent = requireNativeComponent("NativeBridgedComponent");
const SwitchColorTest = () => <Switch trackColor={{ true: 'pink', false: 'red' }} />;
const SwitchColorTest = () => <Switch trackColor={{ true: "pink", false: "red" }} />;
const SwitchThumbColorTest = () => <Switch thumbColor={"red"} />;
const SwitchThumbColorTest = () => <Switch thumbColor={'red'} />;
const NativeIDTest = () => (
<ScrollView nativeID={"nativeID"}>
<View nativeID={"nativeID"} />
<Text nativeID={"nativeID"}>Text</Text>
<ScrollView nativeID={'nativeID'}>
<View nativeID={'nativeID'} />
<Text nativeID={'nativeID'}>Text</Text>
</ScrollView>
);
@ -950,11 +958,11 @@ const MaxFontSizeMultiplierTest = () => <Text maxFontSizeMultiplier={0}>Text</Te
const ShareTest = () => {
Share.share(
{ title: "title", message: "message" },
{ dialogTitle: "dialogTitle", excludedActivityTypes: ["activity"], tintColor: "red", subject: "Email subject" }
{ title: 'title', message: 'message' },
{ dialogTitle: 'dialogTitle', excludedActivityTypes: ['activity'], tintColor: 'red', subject: 'Email subject' },
);
Share.share({ title: "title", url: "url" });
Share.share({ message: "message" }).then(result => {
Share.share({ title: 'title', url: 'url' });
Share.share({ message: 'message' }).then(result => {
if (result.action === Share.sharedAction) {
const activity = result.activityType;
} else if (result.action === Share.dismissedAction) {
@ -963,9 +971,11 @@ const ShareTest = () => {
};
const KeyboardTest = () => {
const subscriber = Keyboard.addListener("keyboardDidHide", (event) => {event});
const subscriber = Keyboard.addListener('keyboardDidHide', event => {
event;
});
subscriber.remove();
}
};
const PermissionsAndroidTest = () => {
PermissionsAndroid.request('android.permission.CAMERA').then(result => {
@ -977,27 +987,29 @@ const PermissionsAndroidTest = () => {
case 'never_ask_again':
break;
}
})
});
PermissionsAndroid.requestMultiple(['android.permission.CAMERA', 'android.permission.ACCESS_FINE_LOCATION']).then(results => {
switch (results['android.permission.CAMERA']) {
case 'granted':
break;
case 'denied':
break;
case 'never_ask_again':
break;
}
switch (results['android.permission.ACCESS_FINE_LOCATION']) {
case 'granted':
break;
case 'denied':
break;
case 'never_ask_again':
break;
}
})
}
PermissionsAndroid.requestMultiple(['android.permission.CAMERA', 'android.permission.ACCESS_FINE_LOCATION']).then(
results => {
switch (results['android.permission.CAMERA']) {
case 'granted':
break;
case 'denied':
break;
case 'never_ask_again':
break;
}
switch (results['android.permission.ACCESS_FINE_LOCATION']) {
case 'granted':
break;
case 'denied':
break;
case 'never_ask_again':
break;
}
},
);
};
// Platform
const PlatformTest = () => {
@ -1024,21 +1036,16 @@ Platform.select({ android: 1, ios: 2, macos: 3, web: 4, windows: 5, default: 0 }
// ProgressBarAndroid
const ProgressBarAndroidTest = () => {
<ProgressBarAndroid
animating
color="white"
styleAttr="Horizontal"
progress={0.42}
/>
<ProgressBarAndroid animating color="white" styleAttr="Horizontal" progress={0.42} />;
};
// Push notification
const PushNotificationTest = () => {
PushNotificationIOS.presentLocalNotification({
alertBody: "notificatus",
userInfo: "informius",
alertTitle: "Titulus",
alertAction: "view",
alertBody: 'notificatus',
userInfo: 'informius',
alertTitle: 'Titulus',
alertAction: 'view',
});
PushNotificationIOS.scheduleLocalNotification({
@ -1047,14 +1054,34 @@ const PushNotificationTest = () => {
alertTitle: 'Hello!',
applicationIconBadgeNumber: 999,
category: 'engagement',
fireDate: (new Date()).toISOString(),
fireDate: new Date().toISOString(),
isSilent: false,
repeatInterval: 'minute',
userInfo: {
abc: 123,
},
});
}
};
// YellowBox
const YellowBoxTest = () => <YellowBox />;
// Appearance
const DarkMode = () => {
const color = useColorScheme();
const isDarkMode = Appearance.getColorScheme() === 'dark';
Appearance.addChangeListener(({ colorScheme }) => {
console.log(colorScheme);
});
Appearance.removeChangeListener(({ colorScheme }) => {
console.log(colorScheme);
});
React.useEffect(() => {
console.log('-color', color);
}, [color]);
return <Text>Is dark mode enabled? {isDarkMode}</Text>;
};

4
types/react-native/test/legacy-properties.tsx
View File

@ -1,4 +1,4 @@
import * as React from "react";
import { TextInputProperties } from "react-native";
import * as React from 'react';
import { TextInputProperties } from 'react-native';
class Test extends React.Component<TextInputProperties> {}

3
types/react-primitives/react-primitives-tests.tsx
View File

@ -47,7 +47,8 @@ export default class Component extends React.Component<{}, State> {
Animated.timing(this.state.opacity, {
toValue: 1,
duration: 10000,
easing: Easing.cubic
easing: Easing.cubic,
useNativeDriver: false,
}).start();
if (Platform.OS === 'sketch') {
console.log('The Platform is sketch');