mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Riccardo Cipolleschi
4d7753eb9a
Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/36360 This change is the iOS equivalent of D43731219 (https://github.com/facebook/react-native/commit/ab55e123da8749d982964f2aee6ce6b0bffdc7fc), but only for what concerns the RNTester example as the interop layer was already present in the codebase and exposed to the OSS. ## Changelog [internal] - Add example on how to consume a Legacy component in Fabric with the interop layer Reviewed By: cortinico Differential Revision: D43735699 fbshipit-source-id: 6cb5a3591e7e4a606c274566226025af91849c16
73 lines
2.0 KiB
JavaScript
73 lines
2.0 KiB
JavaScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow strict-local
|
|
* @format
|
|
*/
|
|
|
|
import * as React from 'react';
|
|
import {useRef, useState} from 'react';
|
|
import {View, Button, Text} from 'react-native';
|
|
import RNTMyNativeView, {
|
|
Commands as RNTMyNativeViewCommands,
|
|
} from './MyNativeViewNativeComponent';
|
|
import RNTMyLegacyNativeView from './MyLegacyViewNativeComponent';
|
|
import type {MyNativeViewType} from './MyNativeViewNativeComponent';
|
|
|
|
const colors = [
|
|
'#0000FF',
|
|
'#FF0000',
|
|
'#00FF00',
|
|
'#003300',
|
|
'#330000',
|
|
'#000033',
|
|
];
|
|
|
|
// This is an example component that migrates to use the new architecture.
|
|
export default function MyNativeView(props: {}): React.Node {
|
|
const ref = useRef<React.ElementRef<MyNativeViewType> | null>(null);
|
|
const [opacity, setOpacity] = useState(1.0);
|
|
const [color, setColor] = useState('#FF0000');
|
|
return (
|
|
<View style={{flex: 1}}>
|
|
<Text style={{color: 'red'}}>Fabric View</Text>
|
|
<RNTMyNativeView ref={ref} style={{flex: 1}} opacity={opacity} />
|
|
<Text style={{color: 'red'}}>Legacy View</Text>
|
|
<RNTMyLegacyNativeView
|
|
style={{flex: 1}}
|
|
opacity={opacity}
|
|
color={color}
|
|
/>
|
|
<Button
|
|
title="Change Background"
|
|
onPress={() => {
|
|
let newColor = colors[Math.floor(Math.random() * 5)];
|
|
setColor(newColor);
|
|
RNTMyNativeViewCommands.callNativeMethodToChangeBackgroundColor(
|
|
// $FlowFixMe[incompatible-call]
|
|
ref.current,
|
|
newColor,
|
|
);
|
|
}}
|
|
/>
|
|
<Button
|
|
title="Set Opacity"
|
|
onPress={() => {
|
|
setOpacity(Math.random());
|
|
}}
|
|
/>
|
|
<Button
|
|
title="Console.log Measure"
|
|
onPress={() => {
|
|
ref.current?.measure((x, y, width, height) => {
|
|
console.log(x, y, width, height);
|
|
});
|
|
}}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|