Skip to content

Add react-native-macos-init for adding macOS apps to existing react-native init projects. #291

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Apr 2, 2020
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
2 changes: 2 additions & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@
Libraries/vendor/**/*
Libraries/Renderer/*
packages/*/node_modules
packages/*/lib
packages/*/lib-commonjs
pr-inactivity-bookmarklet.js
question-bookmarklet.js
flow/
Expand Down
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,8 @@ package-lock.json

/coverage
/third-party
/packages/
/packages/*
!/packages/react-native-macos-init/

# Root dir shouldn't have Xcode project
/*.xcodeproj
Expand Down
2 changes: 1 addition & 1 deletion Libraries/Components/Picker/PickerIOS.ios.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import type {SyntheticEvent} from '../../Types/CoreEventTypes';
import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
import type {ViewProps} from '../View/ViewPropTypes';
import type {TextStyleProp} from '../../StyleSheet/StyleSheet';
import type {NativeOrDynamicColorType} from '../../Color/NativeOrDynamicColorType'; // ]TODO(macOS ISS#2323203)
import type {NativeOrDynamicColorType} from '../../Color/NativeOrDynamicColorType'; // TODO(macOS ISS#2323203)

type PickerIOSChangeEvent = SyntheticEvent<
$ReadOnly<{|
Expand Down
154 changes: 153 additions & 1 deletion Libraries/Components/Picker/PickerIOS.macos.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,156 @@

// TODO(macOS ISS#2323203)

module.exports = require('../UnimplementedViews/UnimplementedView');
'use strict';

const React = require('react');
const ReactNative = require('../../Renderer/shims/ReactNative');
const StyleSheet = require('../../StyleSheet/StyleSheet');
const View = require('../View/View');
const processColor = require('../../StyleSheet/processColor');
const RCTPickerNativeComponent = require('./RCTPickerNativeComponent');

import type {SyntheticEvent} from '../../Types/CoreEventTypes';
import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
import type {ViewProps} from '../View/ViewPropTypes';
import type {TextStyleProp} from '../../StyleSheet/StyleSheet';
import type {NativeOrDynamicColorType} from '../../Color/NativeOrDynamicColorType'; // TODO(macOS ISS#2323203)

type PickerIOSChangeEvent = SyntheticEvent<
$ReadOnly<{|
newValue: number | string,
newIndex: number,
|}>,
>;

type RCTPickerIOSItemType = $ReadOnly<{|
label: ?Label,
value: ?(number | string),
textColor: ?(number | NativeOrDynamicColorType), // TODO(macOS ISS#2323203)
|}>;

type RCTPickerIOSType = Class<
ReactNative.NativeComponent<
$ReadOnly<{|
items: $ReadOnlyArray<RCTPickerIOSItemType>,
onChange: (event: PickerIOSChangeEvent) => void,
onResponderTerminationRequest: () => boolean,
onStartShouldSetResponder: () => boolean,
selectedIndex: number,
style?: ?TextStyleProp,
testID?: ?string,
|}>,
>,
>;

type Label = Stringish | number;

type Props = $ReadOnly<{|
...ViewProps,
children: React.ChildrenArray<React.Element<typeof PickerIOSItem>>,
itemStyle?: ?TextStyleProp,
onChange?: ?(event: PickerIOSChangeEvent) => mixed,
onValueChange?: ?(itemValue: string | number, itemIndex: number) => mixed,
selectedValue: ?(number | string),
|}>;

type State = {|
selectedIndex: number,
items: $ReadOnlyArray<RCTPickerIOSItemType>,
|};

type ItemProps = $ReadOnly<{|
label: ?Label,
value?: ?(number | string),
color?: ?ColorValue,
|}>;

const PickerIOSItem = (props: ItemProps) => {
return null;
};

class PickerIOS extends React.Component<Props, State> {
_picker: ?React.ElementRef<RCTPickerIOSType> = null;

state = {
selectedIndex: 0,
items: [],
};

static Item = PickerIOSItem;

static getDerivedStateFromProps(props: Props): State {
let selectedIndex = 0;
const items = [];
React.Children.toArray(props.children)
.filter(child => child !== null)
.forEach(function(child, index) {
if (child.props.value === props.selectedValue) {
selectedIndex = index;
}
items.push({
value: child.props.value,
label: child.props.label,
textColor: processColor(child.props.color),
});
});
return {selectedIndex, items};
}

render() {
return (
<View style={this.props.style}>
<RCTPickerNativeComponent
ref={picker => {
this._picker = picker;
}}
testID={this.props.testID}
style={[styles.pickerIOS, this.props.itemStyle]}
items={this.state.items}
selectedIndex={this.state.selectedIndex}
onChange={this._onChange}
onStartShouldSetResponder={() => true}
onResponderTerminationRequest={() => false}
/>
</View>
);
}

_onChange = event => {
if (this.props.onChange) {
this.props.onChange(event);
}
if (this.props.onValueChange) {
this.props.onValueChange(
event.nativeEvent.newValue,
event.nativeEvent.newIndex,
);
}

// The picker is a controlled component. This means we expect the
// on*Change handlers to be in charge of updating our
// `selectedValue` prop. That way they can also
// disallow/undo/mutate the selection of certain values. In other
// words, the embedder of this component should be the source of
// truth, not the native component.
if (
this._picker &&
this.state.selectedIndex !== event.nativeEvent.newIndex
) {
this._picker.setNativeProps({
selectedIndex: this.state.selectedIndex,
});
}
};
}

const styles = StyleSheet.create({
pickerIOS: {
// The picker will conform to whatever width is given, but we do
// have to set the component's height explicitly on the
// surrounding view to ensure it gets rendered.
height: 216,
},
});

module.exports = PickerIOS;
27 changes: 9 additions & 18 deletions Libraries/Components/ProgressViewIOS/ProgressViewIOS.macos.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,14 @@

'use strict';

var React = require('React');
var StyleSheet = require('StyleSheet');
const React = require('react');
const StyleSheet = require('../../StyleSheet/StyleSheet');

var requireNativeComponent = require('requireNativeComponent');
const RCTProgressViewNativeComponent = require('./RCTProgressViewNativeComponent');

import type {NativeComponent} from 'ReactNative';
import type {ImageSource} from 'ImageSource';
import type {ColorValue} from 'StyleSheetTypes';
import type {ViewProps} from 'ViewPropTypes';
import type {ImageSource} from '../../Image/ImageSource';
import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
import type {ViewProps} from '../View/ViewPropTypes';

type Props = $ReadOnly<{|
...ViewProps,
Expand Down Expand Up @@ -56,20 +55,14 @@ type Props = $ReadOnly<{|
trackImage?: ?ImageSource,
|}>;

type NativeProgressViewIOS = Class<NativeComponent<Props>>;

const RCTProgressView = ((requireNativeComponent(
'RCTProgressView',
): any): NativeProgressViewIOS);

/**
* Use `ProgressViewIOS` to render a UIProgressView on iOS.
*/
const ProgressViewIOS = (
props: Props,
forwardedRef?: ?React.Ref<typeof RCTProgressView>,
forwardedRef?: ?React.Ref<typeof RCTProgressViewNativeComponent>,
) => (
<RCTProgressView
<RCTProgressViewNativeComponent
{...props}
style={[styles.progressView, props.style]}
ref={forwardedRef}
Expand All @@ -82,11 +75,9 @@ const styles = StyleSheet.create({
},
});

// $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
const ProgressViewIOSWithRef = React.forwardRef(ProgressViewIOS);

/* $FlowFixMe(>=0.89.0 site=react_native_ios_fb) This comment suppresses an
* error found when Flow v0.89 was deployed. To see the error, delete this
* comment and run Flow. */
// $FlowFixMe
module.exports = (ProgressViewIOSWithRef: NativeProgressViewIOS);
module.exports = (ProgressViewIOSWithRef: typeof RCTProgressViewNativeComponent);
7 changes: 7 additions & 0 deletions Libraries/NewAppScreen/components/DebugInstructions.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,13 @@ const DebugInstructions = Platform.select({
Native debug menu.
</Text>
),
// [TODO(macOS ISS#2323203)
macos: () => (
<Text>
Secondary click in this window to open the React Native debug menu.
</Text>
),
// ]TODO(macOS ISS#2323203)
default: () => (
<Text>
Press <Text style={styles.highlight}>menu button</Text> or{' '}
Expand Down
8 changes: 8 additions & 0 deletions Libraries/NewAppScreen/components/ReloadInstructions.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,14 @@ const ReloadInstructions = Platform.select({
reload your app's code.
</Text>
),
// [TODO(macOS ISS#2323203)
macos: () => (
<Text>
Secondary click in this window and choose{' '}
<Text style={styles.highlight}>Reload</Text> to reload your app's code.
</Text>
),
// ]TODO(macOS ISS#2323203)
default: () => (
<Text>
Double tap <Text style={styles.highlight}>R</Text> on your keyboard to
Expand Down
20 changes: 8 additions & 12 deletions Libraries/react-native/react-native-implementation.macos.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,9 @@ const warnOnce = require('warnOnce');
// Export React, plus some native additions.
module.exports = {
// Components
/*
get AccessibilityInfo() {
return require('AccessibilityInfo');
},*/
},
get ActivityIndicator() {
return require('ActivityIndicator');
},
Expand Down Expand Up @@ -57,8 +56,7 @@ module.exports = {
/*
get ImageEditor() {
return require('ImageEditor');
},
*/
},*/
get ImageStore() {
warnOnce(
'imagestore-deprecation',
Expand All @@ -76,15 +74,14 @@ module.exports = {
get KeyboardAvoidingView() {
return require('KeyboardAvoidingView');
},
get ListView() {
get ListView() {
warnOnce(
'listview-deprecation',
'ListView is deprecated and will be removed in a future release. ' +
'See https://fb.me/nolistview for more information',
);
return require('ListView');
},
/*
},*/
get MaskedViewIOS() {
warnOnce(
'maskedviewios-moved',
Expand All @@ -94,6 +91,7 @@ module.exports = {
);
return require('MaskedViewIOS');
},
/*
get Modal() {
return require('Modal');
},*/
Expand All @@ -103,13 +101,12 @@ module.exports = {
get PickerIOS() {
return require('../Components/Picker/PickerIOS');
},
/*
get ProgressBarAndroid() {
return require('ProgressBarAndroid');
},
get ProgressViewIOS() {
return require('ProgressViewIOS');
},*/
},
get SafeAreaView() {
return require('SafeAreaView');
},
Expand All @@ -119,11 +116,9 @@ module.exports = {
get SectionList() {
return require('SectionList');
},
/*
get SegmentedControlIOS() {
return require('SegmentedControlIOS');
},
*/
get Slider() {
warnOnce(
'slider-moved',
Expand All @@ -139,10 +134,11 @@ module.exports = {
/*
get RefreshControl() {
return require('RefreshControl');
},
},*/
get StatusBar() {
return require('StatusBar');
},
/*
get SwipeableFlatList() {
return require('SwipeableFlatList');
},*/
Expand Down
4 changes: 4 additions & 0 deletions RNTester/RNTester.xcodeproj/project.pbxproj
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,8 @@
2DE7E8061FB2A4F3009E225D /* libRCTWebSocket-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 2DD323D51DA2DD8B000FE1B8 /* libRCTWebSocket-tvOS.a */; };
2DE7E8071FB2A4F3009E225D /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 2DD323D91DA2DD8B000FE1B8 /* libReact.a */; };
3578590A1B28D2CF00341EDB /* libRCTLinking.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 357859011B28D2C500341EDB /* libRCTLinking.a */; };
383C517F243447EC00CCBC30 /* UpdatePropertiesExampleView.m in Sources */ = {isa = PBXBuildFile; fileRef = 272E6B3C1BEA849E001FCF37 /* UpdatePropertiesExampleView.m */; };
383C51A624344A4600CCBC30 /* FlexibleSizeExampleView.m in Sources */ = {isa = PBXBuildFile; fileRef = 27F441E81BEBE5030039B79C /* FlexibleSizeExampleView.m */; };
38C500E222D3CF2E00BCD999 /* RCTConvert_UIColorTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 38C500E122D3CF2E00BCD999 /* RCTConvert_UIColorTests.m */; };
39AA31A41DC1DFDC000F7EBB /* RCTUnicodeDecodeTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 39AA31A31DC1DFDC000F7EBB /* RCTUnicodeDecodeTests.m */; };
3D05746D1DE6008900184BB4 /* libRCTPushNotification-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3D05746C1DE6008900184BB4 /* libRCTPushNotification-tvOS.a */; };
Expand Down Expand Up @@ -3130,6 +3132,8 @@
18FC77901EF4770B002B3F17 /* ViewController.m in Sources */,
18FC778D1EF4770B002B3F17 /* main.m in Sources */,
18FC778A1EF4770B002B3F17 /* AppDelegate.m in Sources */,
383C51A624344A4600CCBC30 /* FlexibleSizeExampleView.m in Sources */,
383C517F243447EC00CCBC30 /* UpdatePropertiesExampleView.m in Sources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
*
*/

#import <UIKit/UIKit.h>
#import <React/RCTUIKit.h> // TODO(macOS ISS#2323203)

#import <React/RCTView.h>

Expand Down
Loading