Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "adds default Modal",
"packageName": "@office-iss/react-native-win32",
"email": "tatianakapos@microsoft.com",
"dependentChangeType": "patch"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "Implement accessibilityState checked",
"packageName": "@react-native-windows/codegen",
"email": "34109996+chiaramooney@users.noreply.github.com",
"dependentChangeType": "patch"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "Fix issue with prop cloning with custom native props",
"packageName": "@react-native-windows/codegen",
"email": "53619745+rnbot@users.noreply.github.com",
"dependentChangeType": "patch"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "Update Provider Guardrails",
"packageName": "react-native-windows",
"email": "34109996+chiaramooney@users.noreply.github.com",
"dependentChangeType": "patch"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "Implement accessibilityState checked",
"packageName": "react-native-windows",
"email": "34109996+chiaramooney@users.noreply.github.com",
"dependentChangeType": "patch"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "adds default modal that hosts fabric components",
"packageName": "react-native-windows",
"email": "tatianakapos@microsoft.com",
"dependentChangeType": "patch"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "Cleanup ReactNativeAppBuilder and ReactNativeWin32App",
"packageName": "react-native-windows",
"email": "jthysell@microsoft.com",
"dependentChangeType": "patch"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "Focus should notify island host when tab loop wraps to give host oportunity to take focus",
"packageName": "react-native-windows",
"email": "30809111+acoates-ms@users.noreply.github.com",
"dependentChangeType": "patch"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "Fix issue with prop cloning with custom native props",
"packageName": "react-native-windows",
"email": "53619745+rnbot@users.noreply.github.com",
"dependentChangeType": "patch"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "Default scroll to bring a component into view should have padding around the viewport",
"packageName": "react-native-windows",
"email": "30809111+acoates-ms@users.noreply.github.com",
"dependentChangeType": "patch"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "Add very basic box-shadow support",
"packageName": "react-native-windows",
"email": "30809111+acoates-ms@users.noreply.github.com",
"dependentChangeType": "patch"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "Introduced autocapitalize prop in TextInput",
"packageName": "react-native-windows",
"email": "14967941+danielayala94@users.noreply.github.com",
"dependentChangeType": "patch"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "Update focus visuals to use cornerRadius and inner/outer strokes.",
"packageName": "react-native-windows",
"email": "30809111+acoates-ms@users.noreply.github.com",
"dependentChangeType": "patch"
}
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,11 @@ const Components: Array<RNTesterModuleInfo> = [
key: 'ImageWin32Test',
module: require('@office-iss/react-native-win32/Libraries/Image/Tests/ImageWin32Test'),
},
{
key: 'ModalExample',
category: 'UI',
module: require('../examples/Modal/ModalExample'),
},
/*
{
key: 'JSResponderHandlerExample',
Expand All @@ -68,11 +73,6 @@ const Components: Array<RNTesterModuleInfo> = [
key: 'KeyboardAvoidingViewExample',
module: require('../examples/KeyboardAvoidingView/KeyboardAvoidingViewExample'),
},
{
key: 'ModalExample',
category: 'UI',
module: require('../examples/Modal/ModalExample'),
},
{
key: 'NewAppScreenExample',
module: require('../examples/NewAppScreen/NewAppScreenExample'),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,14 @@ const headerTemplate = `/*

const propsTemplate = `REACT_STRUCT(::_PROPS_NAME_::)
struct ::_PROPS_NAME_:: : winrt::implements<::_PROPS_NAME_::, winrt::Microsoft::ReactNative::IComponentProps> {
::_PROPS_NAME_::(winrt::Microsoft::ReactNative::ViewProps props) : ViewProps(props) {}
::_PROPS_NAME_::(winrt::Microsoft::ReactNative::ViewProps props, const winrt::Microsoft::ReactNative::IComponentProps& cloneFrom)
: ViewProps(props)
{
if (cloneFrom) {
auto cloneFromProps = cloneFrom.as<::_PROPS_NAME_::>();
::_PROP_INITIALIZERS_::
}
}

void SetProp(uint32_t hash, winrt::hstring propName, winrt::Microsoft::ReactNative::IJSValueReader value) noexcept {
winrt::Microsoft::ReactNative::ReadProp(hash, propName, value, *this);
Expand Down Expand Up @@ -144,8 +151,10 @@ void Register::_COMPONENT_NAME_::NativeComponent(
L"::_COMPONENT_NAME_::", [builderCallback](winrt::Microsoft::ReactNative::IReactViewComponentBuilder const &builder) noexcept {
auto compBuilder = builder.as<winrt::Microsoft::ReactNative::Composition::IReactCompositionViewComponentBuilder>();

builder.SetCreateProps(
[](winrt::Microsoft::ReactNative::ViewProps props) noexcept { return winrt::make<::_COMPONENT_NAME_::Props>(props); });
builder.SetCreateProps([](winrt::Microsoft::ReactNative::ViewProps props,
const winrt::Microsoft::ReactNative::IComponentProps& cloneFrom) noexcept {
return winrt::make<::_COMPONENT_NAME_::Props>(props, cloneFrom);
});

builder.SetUpdatePropsHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
const winrt::Microsoft::ReactNative::IComponentProps &newProps,
Expand Down Expand Up @@ -294,6 +303,12 @@ export function createComponentGenerator({
})
.join('\n');

const propInitializers = componentShape.props
.map(prop => {
return ` ${prop.name} = cloneFromProps->${prop.name};`;
})
.join('\n');

const propObjectTypes = propObjectAliases.jobs
.map(propObjectTypeName => {
const propObjectType = propObjectAliases.types[propObjectTypeName]!;
Expand Down Expand Up @@ -508,6 +523,7 @@ ${
.replace(/::_EVENT_EMITTER_NAME_::/g, eventEmitterName)
.replace(/::_PROPS_NAME_::/g, propsName)
.replace(/::_COMPONENT_NAME_::/g, componentName)
.replace(/::_PROP_INITIALIZERS_::/g, propInitializers)
.replace(/::_PROPS_FIELDS_::/g, propsFields)
.replace(/::_NAMESPACE_::/g, namespace)
.replace(/\n\n\n+/g, '\n\n');
Expand Down
12 changes: 12 additions & 0 deletions packages/@react-native-windows/tester/overrides.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,18 @@
"type": "platform",
"file": "src/js/examples/HTTP/HTTPExampleMultiPartFormData.js"
},
{
"type": "patch",
"file": "src/js/examples/Modal/ModalOnShow.windows.js",
"baseFile": "packages/rn-tester/js/examples/Modal/ModalOnShow.js",
"baseHash": "5098723f16d232ef3c5971a6f153522f42f87f61"
},
{
"type": "patch",
"file": "src/js/examples/Modal/ModalPresentation.windows.js",
"baseFile": "packages/rn-tester/js/examples/Modal/ModalPresentation.js",
"baseHash": "97e0408dad28bd62e6ec22a8454af764d69d8ed5"
},
{
"type": "patch",
"file": "src/js/examples/Pressable/PressableExample.windows.js",
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
/**
* 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 type {RNTesterModuleExample} from '../../types/RNTesterTypes';

import * as React from 'react';
import {Modal, Pressable, StyleSheet, Text, View} from 'react-native';

function ModalOnShowOnDismiss(): React.Node {
const [modalShowComponent, setModalShowComponent] = React.useState(true);
const [modalVisible, setModalVisible] = React.useState(false);
const [onShowCount, setOnShowCount] = React.useState(0);
const [onDismissCount, setOnDismissCount] = React.useState(0);

return (
<View style={styles.container}>
{modalShowComponent && (
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onShow={() => {
setOnShowCount(onShowCount + 1);
}}
onDismiss={() => {
setOnDismissCount(onDismissCount + 1);
}}
onRequestClose={() => {
setModalVisible(false);
}}>
<View
style={[
styles.centeredView,
styles.modalBackdrop,
styles.widthHeight,
]}>
<View style={styles.modalView}>
<Text testID="modal-on-show-count">
onShow is called {onShowCount} times
</Text>
<Text testID="modal-on-dismiss-count">
onDismiss is called {onDismissCount} times
</Text>
<Pressable
style={[styles.button, styles.buttonClose]}
onPress={() => setModalVisible(false)}>
<Text testID="dismiss-modal" style={styles.textStyle}>
Hide modal by setting visible to false
</Text>
</Pressable>
<Pressable
style={[styles.button, styles.buttonClose]}
onPress={() => setModalShowComponent(false)}>
<Text
testID="dismiss-modal-by-removing-component"
style={styles.textStyle}>
Hide modal by removing component
</Text>
</Pressable>
</View>
</View>
</Modal>
)}
<Text testID="on-show-count">onShow is called {onShowCount} times</Text>
<Text testID="on-dismiss-count">
onDismiss is called {onDismissCount} times
</Text>
<Pressable
style={[styles.button, styles.buttonOpen]}
onPress={() => {
setModalShowComponent(true);
setModalVisible(true);
}}>
<Text testID="open-modal" style={styles.textStyle}>
Show Modal
</Text>
</Pressable>
</View>
);
}

const styles = StyleSheet.create({
container: {
display: 'flex',
alignItems: 'center',
paddingVertical: 30,
},
centeredView: {
// flex: 1, [Windows]
justifyContent: 'center',
alignItems: 'center',
},
modalBackdrop: {
backgroundColor: 'rgba(0, 0, 0, 0.5)',
},
modalView: {
margin: 20,
backgroundColor: 'white',
borderRadius: 20,
padding: 35,
alignItems: 'center',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
},
button: {
borderRadius: 20,
padding: 10,
marginVertical: 20,
elevation: 2,
},
buttonOpen: {
backgroundColor: '#F194FF',
},
buttonClose: {
backgroundColor: '#2196F3',
},
textStyle: {
color: 'white',
fontWeight: 'bold',
textAlign: 'center',
},
// [Windows
widthHeight: {
width: 300,
height: 400,
},
// Windows]
});

export default ({
title: "Modal's onShow/onDismiss",
name: 'onShow',
description:
'onShow and onDismiss (iOS only) callbacks are called when a modal is shown/dismissed',
render: (): React.Node => <ModalOnShowOnDismiss />,
}: RNTesterModuleExample);
Loading